首页 > 技术文章 > CSS3之圆角边框,盒子阴影,文字阴影

zysfx 2020-04-23 15:32 原文

CSS3的一些新属性(ie9 及以上版本的浏览器支持)

圆角边框 , 盒子阴影 , 文字阴影

 

(1)圆角边框

border-radius :  length;   // length可以是一个数值,如10px,50px,   也可以是一个百分比,数值越大,那么圆角边框的弧度越明显

典型示例1: 做出一个圆形的盒子     条件:1 这个盒子首先必须是一个正方形   2 length = 盒子宽度的一半( 50% )

 

 

 典型示例2:做一个圆角矩形   条件: length = 盒子高度的一般即可

 

 

 

 

 

(2)盒子阴影

box-show:  水平阴影的位置    垂直阴影的位置   模糊距离   阴影 的尺寸  阴影的颜色   inset

水平阴影的位置 : 必填   例如: 10px  往右移动10px       -10px: 往左移动10px

垂直阴影的位置: 必填     例如      10px  往下移动10px    -10 px   往上移动10px

 

 

模糊距离:0 是实的,数值越大,如100px,越模糊

 

 

阴影的尺寸: 数值越大,阴影越大

 

 阴影的颜色:这个没什么可讲的,你总不能整个红色的阴影吧

 

 

 

 最后一个参数 inset:表示内阴影,如果你不写这个参数 则表示默认的外阴影(一般也不会使用到inset这个参数)

 

 

 最后最重要的一点 ,盒子阴影是不占用空间的,即不会影响到其他的盒子,所以放心使用吧

 

(3)文字阴影 

text-shadow :  水平阴影的位置  垂直阴影的位置 模糊距离   颜色

参数和盒子阴影的使用方法是一致的。

 

 

推荐阅读