CSS3边框

border-radius

设置边框圆角

width: 100px;
height: 100px;
border-radius: 50%;
// 相当于
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;

border-image

用图片作为边框的修饰

box-shadow

边框阴影效果
box-shadow:inset x-offset y-offset blur-radius spread-radius color
box-shadow属性至多有6个参数设置

  • 阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值inset,就是将外阴影变成内阴影
  • X-offset:是指阴影的水平偏移量,其值可以是正负值,如果为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边
  • Y-offset:是指阴影的垂直偏移量,其值可以是正负值,如果为正值,则阴影在对象的底部,反之其值为负值时,阴影在对象的顶部
  • 阴影模糊半径:此参数是可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊
  • 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小
  • 阴影颜色:此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样
边框阴影效果.png

box-sizing:border-box;使用IE盒模型

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

推荐阅读更多精彩内容

  • 3.5 CSS3盒子阴影属性 box-shadow用来定义元素的盒子阴影。 3.5.1 box-shadow属性的...
    白小虫阅读 2,649评论 0 0
  • border css3在很大程度上拓展了border的样式,让我们可以做出更加丰富的效果 border-radiu...
    風隨風去阅读 2,962评论 0 1
  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 6,725评论 0 1
  • border-radius 定义: border-radius属性是一个简写属性,用于设置四个border-*-r...
    lx_smile阅读 3,526评论 2 3
  • 班里有个小姑娘,不爱学习,成绩也不好,因此也不太有自信。有一天早上,孩子们在读书。一个男生坐在座位上伸长了脖子冲我...
    周悠悠阅读 1,605评论 0 0