0
点赞
收藏
分享

微信扫一扫

CSS中新增的样式:圆角边框、盒子阴影、文字阴影

一:css新增样式之圆角边框

(1)简介:在css3中新增加了圆角边框的样式,这样我们的盒子就可以变圆角了。

border-radius属性用于设置元素的外边框圆角。

(2)原理:radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角的效果。

二:css新增样式之盒子阴影

(1)简介: css3中新增加了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影。

(2) 语法:

box-shadow: h-shadow v-shadow blur spread color inset;

描述

h-shadow

必需,水平阴影的位置,允许负值。

v-shadow

必需,垂直阴影的位置,允许负值。

blur

可选,模糊距离。

spread

可选,阴影的尺寸。

color

可选,阴影的颜色,请参阅css颜色值。

inset

可选,将外部阴影(outset)改为内部阴影。

注意:

  1. 默认的是外阴影(outset)但是不可以写这个单词,否则导致阴影无效。2.
  2. 盒子阴影不占空间,不会影响其他盒子的排列。

三:css新增样式之文字阴影

(1)简介:在css3中,我们可以使用text-shaodw属性将阴影应用于文本。

(2)语法:

text-shadow: h-shadow   v-shadow    blur  color;

描述

h-shadow

必需,水平阴影的位置,允许负值。

v-shadow

必需,垂直阴影的位置,允许负值。

blur

可选,模糊的距离。

color

可选,阴影的颜色参阅css颜色值。









举报

相关推荐

0 条评论