网站精神文明建设专栏,谷歌不收录网站,广告优化师的工作内容,刚开始做网站哪有免费空间1#xff0c;圆角边框
在CSS3中#xff0c;新增了圆角边框样式#xff0c;这样我们的盒子就可以变圆角了
border-radious属性用于设置元素的外边框圆角
语法#xff1a; border-radious#xff1a;length#xff1b; radious 半径#xff08;圆的半径#xff09;原理…1圆角边框
在CSS3中新增了圆角边框样式这样我们的盒子就可以变圆角了
border-radious属性用于设置元素的外边框圆角
语法 border-radiouslength radious 半径圆的半径原理椭圆与边框的交集形成圆角效果
注意 参数值可以为数值或者百分比的形式 如果是正方形想要设置为一个圆把数值修改为高度或者宽度的一半即可或者直接写为50% 如果是个矩形想要设置为一个圆角矩形把数值修改为高度的一半就可以做 该属性是一个简写属性可以设置不同的圆角 定义四个值分别代表左上角右上角右下角左下角顺时针 定义两个值代表左上角 、右下角和右上角、左下角呈对角线型 分开写border-top-left-radious、border-top-right-radious、border-bottom-left-radious、border-bottom-right-radious
2盒子阴影 CSS3中新增了盒子阴影我们可以使用box-shadow属性为盒子添加阴影
语法 box-shaowh-shaow v-shaow blur spread color inset 值 描述 h-shaow 必需水平阴影的位置允许负值 v-shaow 必需垂直阴影的位置允许负值 blur 可选模糊距离影子模糊程度 spread 可选阴影的尺寸阴影的大小 color 可选阴影的颜色请参阅CSS颜色值 inset 可选将外部阴影outset改为内部阴影 box-shaow:10px 10px 10px 10px rgba(0,0,0,.3);
注意
1默认的是外阴影outset但是不可以写这个单词否则导致阴影无效
2盒子阴影不占用空间不会影响其他盒子排列
3文字阴影 在CSS3中我们可以使用text-shadow属性将阴影应用于文本
语法 text-shadowh-shadow v-shadow blur color 值 描述 h-shadow 必需水平阴影的位置允许负值 v-shadow 必需垂直阴影的位置允许负值 blur 可选模糊的距离 color 可选阴影的颜色参阅CSS颜色值
