圆角框吧应该

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div{
    text-align:center;/*把文字放在中央*/
    width:200px;/*设置宽度*/
    border:2px solid;/*边框的宽度*/
    border-radius:30px;/*圆角的大小*/
    background:#CCC;/*选个颜色*/
}
</style>
</head>
<body>
<div><p>看一下效果</p></div>
</body>
</html>

时间： 2024-08-03 18:13:24

圆角框吧应该的相关文章

第4章背景图像效果之圆角框

一圆角框 1 固定宽度的圆角框 <style> .box{ width: 418px; background: #effce7 url(img/bottom.gif) no-repeat left bottom;} .box h2{ background: url(img/top.gif) no-repeat left top; padding: 20px 20px 0px 20px ;} .box p{ padding: 0 20px 20px 20px;} </style>

圆角框投影不透明度

圆角框固定宽度的圆角框两个图像:一个用于框的顶部,一个在底部. <div class="box"> <h2>Lorem Ipsum</h2> <p></p> </div> .box { width: 418px; background: #effce7 url(img/bottom.gif) no-repeat left bottom; } .box h2 { background: url(img/top.g

11.1 圆角框的作用

在网页设计中,通常需要把网页分为若干个部分,这正是CSS的强项.使用CSS可以方便地使用各种手段把页面灵活地分为多个部分.但是简单分割出来的都是矩形方枢,设置背景颜色和边框的颜色,产生的都只能是矩形的方框.而在网页中,经常会需要用到圆角的设计.因此,为了使页面中可以灵活地使用圃角框,有很多专家都研究出了非常好的方法,本章就来专门对圆角的设计进行介绍. http://homepages.ulb.ac.be/~cschrett/zengarden/dayandnight/所示的是一个非常常见的布局形

11.2 固定宽度圆角框

因为不必考虑宽度变化带来的麻烦,所以制作宽度固定的圆角框比制作适应宽度的圆角框要简单很多.关键在于如何合理地使用背景图像. 一.两背景图像法本例制作如图1所示的圆角框,使用两个背景图像文件,宽度固定.这种方法只适用于制作单色圆角框.本实例文件位于网页学习网CSS教程资源中“第11章\01\basic.htm”. 图1 圆角框案例效果 ① 使用这种方法首先要确定圆角框的颜色,以及圆角框后面的网页背景的颜色,然后根据这两种颜色制作两个图像文件,如图2所示.例如,这里的网页背景为白色,圆角框为咖啡色

11.4 “5图形”二维滑动门经典圆角框

11.3节介绍的不固定宽度的圆角框制作方法只适用于单色的圆角框,对于带有复杂边框的圆角框就不适用了. 另外,还需要考虑一个问题,用11.3节介绍的方法制作的圆角框,尽管可以适应不同宽度,但是它里面的正文段落也承担了设置圆角框布局的任务.也就是说,圆角框中的正文并不是独立的,正文内容不能自由地设置样式.这对于通用型的网页来说,局限性很大:例如,如果较为复杂的页面,每个圆角框用于放置不同的栏目,希望达到的目标应该是可以在每个圆角框中放置任何内容,并且可以对这些内容设置样式,还能保证圆角框本身显示正确

CSS3圆角框、阴影兼容IE JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--[if IE]> <script type

css3简单的圆角框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

固定宽度的圆角框

1 .box{ width:418px; background:#effce7 url(/img/bottom.gif) no-repeat left bottom; padding-bottom:1px;}.box h2{ background:url(/img/top.gif) no-repeat left top; margin-top:0; padding:20px 20px 0 20px;}.box p{ padding:0 20px;} <div class="box"

HTML5圆角框的一个“通知公告”页面

<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>紧急通知-HTML5</title><style type="text/css">body { width: 700p