第一个简单的CSS命令
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> div { width:200px;/*定义区域的宽度*/ height:100px;/*定义区域的高度*/ background-color:red;/*定义背景颜色*/ border:1px solid black;/*定义边界的宽度*/ border-radius: 10px;/*定义方框四角为圆形*/ box-shadow:10px 10px 10px #888888;/*定义阴影*/ } div#div2/*定义新的函数*/ { transform:rotate(30deg);/*旋转角度,顺时针*/ -1321213132-/*前面这句话中不能含有中文*/ /*下面两句话是对后面的语句进行注释,不执行*/ -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } </style> </head> <body> <div>这是一个简单的DIV元素</div> <div id="div2">这是一个上述图形顺时针旋转30度的 DIV 元素</div> </body> </html>
上述代码的运行结果
CSS3 边框
属性 | 说明 | CSS |
---|---|---|
border-image | 设置所有边框图像的速记属性。 | 3 |
border-radius | 一个用于设置所有四个边框- *-半径属性的速记属性 | 3 |
box-shadow | 附加一个或多个下拉框的阴影 | 3 |
用 CSS3,可以创建圆角边框,添加阴影框,并作为边界的形象
CSS3 圆角
- border-radius
div/*在div中添加圆角元素*/ { border:2px solid; border-radius:25px; }
CSS3 border-radius - 指定每个圆角
属性 | 描述 |
---|---|
border-radius | 所有四个边角 border-*-*-radius 属性的缩写 |
border-top-left-radius | 定义了左上角的弧度 |
border-top-right-radius | 定义了右上角的弧度 |
border-bottom-right-radius | 定义了右下角的弧度 |
border-bottom-left-radius | 定义了左下角的弧度 |
如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。
但是,如果你要在四个角上一一指定,可以使用以下规则:
- 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
- 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
- 一个值: 四个圆角值相同
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #rcorners4 { border-radius: 15px 50px 30px 5px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners5 { border-radius: 15px 50px 30px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners6 { border-radius: 15px 50px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <p>四个值 - border-radius: 15px 50px 30px 5px:</p> <p id="rcorners4"></p> <p>三个值 - border-radius: 15px 50px 30px:</p> <p id="rcorners5"></p> <p>两个值 - border-radius: 15px 50px:</p> <p id="rcorners6"></p> </body> </html>
上述代码运行结果
创建椭圆边角:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #rcorners7 { border-radius: 50px/15px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners8 { border-radius: 15px/50px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners9 { border-radius: 50%; background: #8AC007; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <p>椭圆边框 - border-radius: 50px/15px:</p> <p id="rcorners7"></p> <p> 椭圆边框 - border-radius: 15px/50px:</p> <p id="rcorners8"></p> <p>椭圆边框 - border-radius: 50%:</p> <p id="rcorners9"></p> </body> </html>
上述代码运行结果:
CSS3 盒阴影
- box-shadow
div { box-shadow: 10px 10px 5px #888888; }
CSS3 边界图片
- border-image
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> div { border:15px solid transparent; width:250px; padding:10px 20px; } #round { border-image:url(border.png) 30 30 round; } #stretch { border-image:url(border.png) 30 30 stretch; } </style> </head> <body> <p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p> <p> border-image 属性用于设置图片的边框。</p> <div id="round">这里,图像平铺(重复)来填充该区域。</div> <br> <div id="stretch">这里,图像被拉伸以填充该区域。</div> <p>这是我们使用的图片素材:</p> <img src="/images/border.png" /> </body> </html>
上述代码的运行结果