border-radius、box-shadow及box-sizing

H5、C3新增了好多好玩的玩意儿,这样就能做出很多新鲜的东西啦。。。

border-radius : 圆角属性

border-radius 属性是一个简写属性,用于设置四个 border-radius 属性
border-radius:top-left top-right bottom-right bottom-left;
(属性值可写数字或百分比)
举例:border-radius:2px;
等价于
border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;

.box{
width:100px;
height:100px;
background: red;
border-radius:50%;
}

效果图如下:


Paste_Image.png

box-shadow : 阴影属性

box-shadow: 水平阴影(可负 , 必填) 垂直阴影(可负 , 必填) 模糊距离(可选 ) 阴影尺寸(可选 ) 阴影颜色(可选 ) 改为内阴影(可选 );
别问为什么写汉字~~~~~

.box{
width: 100px;
height: 100px;
background: red;
box-shadow: 0 0 25px 0px #000;
}

效果图如下:


Paste_Image.png

box-sizing属性

属性值两个:(不做例子解释了)
1、content-box:元素的高度与宽度不包括padding、border;
2、border-box:元素的高度与宽度包括padding、border 即不把边框计算在内;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,721评论 0 8
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,216评论 0 11
  • 前段时间发的一幅画(时间有点久远,不要在意这些细节(๑˙ー˙๑)),现在把它上好色了~ 用的是彩铅,有的细节用了马...
    晞九儿阅读 289评论 0 6
  • “With the ninth pick in the 1997 NBA draft,the Toronto Ra...
    笛涤阅读 684评论 0 2
  • 小的时候总觉得时间充足,永远都释放不完,可以每天没日没夜的拉朋友玩耍不知疲倦,不知天高地厚,憧憬着自己可以去开飞机...
    蚊子的家阅读 403评论 0 2