码迷,mamicode.com
首页 > Web开发 > 详细

CSS3边框特效

时间:2017-06-25 12:44:25      阅读:665      评论:0      收藏:0      [点我收藏+]

标签:ado   默认   阴影   显示   元素   圆角   颜色   sha   方向   

1.边框阴影:box-shadow:30px 10px 10px 10px black;

(1)水平方向的阴影,负值向左偏移。

(2)垂直方向阴影,负值向上偏移。

(3)代表阴影模糊度,最小为0,模糊代表越往外侧颜色越浅。

(4)阴影的外延值,代表阴影所占据的范围。

(5)阴影的颜色,可以省略,默认为黑色。

box-shadow:30px 10px 10px;(三个值,阴影的外延值就不存在了)。

box-shadow:30px 10px;(两个值,阴影的模糊度和外延值就不存在了)。

insert代表阴影出现在元素的内部,大于0出现在左和上,小于0出现在右和下。

box-shadow:insert 10px -10px;

2.圆角

border-radius:10px 30px;(代表左上,右下)

border-radius:10px 30px 50px;(代表右上,右下,左下)

border-radius:10px 30px 50px 70px(按顺时针显示左上,右上,右下,左下)

border-radius:100px(水平)/50px(垂直)     (水平的椭圆)

 

CSS3边框特效

标签:ado   默认   阴影   显示   元素   圆角   颜色   sha   方向   

原文地址:http://www.cnblogs.com/SummerBreezeYHC/p/7076461.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!