资讯专栏INFORMATION COLUMN

CSS3-阴影参数基础

MonoLog / 3061人阅读

摘要:水平阴影的位置。阴影的颜色语法值描述必需。阴影水平偏移量,可正可负,正值表示阴影在右边,负值表示阴影在左边。将外部阴影改为内部阴影。向框添加一个或多个倒影。定义倒影与对象之间的间隔,可正可负,默认为。使用线性渐变创建遮罩图像。

box-shadow

语法:text-shadow: x-shadow y-shadow distance color;

 

值  描述 
x-shadow  必需。水平阴影的位置。允许负值。
y-shadow  必需。垂直阴影的位置。允许负值。
distance  可选。模糊的距离。 测试
color  可选。阴影的颜色

text-shadow

语法:box-shadow: x-shadow y-shadow distance size color inset/outset;

 

描述
x-shadow 必需。阴影水平偏移量,可正可负,正值表示阴影在右边,负值表示阴影在左边。
y-shadow 必需。阴影垂直偏移量,可正可负,正值表示阴影在上边,负值表示阴影在下边。
distance 可选。阴影模糊距离。只能为正值,值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊。
size  可选。阴影扩展半径。可正可负,正值表示整个阴影都延展扩大,负值表示缩小。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。

box-reflect

向框添加一个或多个倒影。

(1)direction:定义倒影的方向,取值包括:

above:倒影在对象的上边。
below:倒影在对象的下边。
left:倒影在对象的左边。
right:倒影在对象的右边。
(2)offset:定义倒影与对象之间的间隔,可正可负,默认为0。取值包括:

长度值
百分比(根据对象的尺寸进行确定)
(3)mask-box-image:定义遮罩图像,该图像将覆盖投影区域,默认为无遮罩。

:使用绝对或相对地址指定遮罩图像。
:使用线性渐变创建遮罩图像。
:使用径向(放射性)渐变创建遮罩图像。
:使用重复的线性渐变创建背遮罩像。
:使用重复的径向(放射性)渐变创建遮罩图像。

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2206.html

相关文章

  • CSS3 新特性

    摘要:语法说明对象选择器投影方式轴偏移量轴偏移量模糊半径阴影扩展半径阴影颜色内阴影,向右偏移,向下偏移,模糊半径,阴影缩小属性的参数设置取值阴影类型此参数可选。 CSS3 是最新的 CSS 标准,并且完全向后兼容,不过目前W3C 仍然在对 CSS3 规范进行开发,虽然标准的规范还没有正式发布,但是现代浏览器已经支持相当多的 CSS3 属性了。CSS3 提供了很多可以把玩的新特性,模糊了之前只...

    justjavac 评论0 收藏0
  • css3 border-radius box-shadow

    摘要:是的一半半径至少设置为的值是向盒子添加阴影。我们来看下语法轴偏移量轴偏移量阴影模糊半径阴影扩展半径阴影颜色投影方式参数介绍注意可以写在参数的第一个或最后一个,其它位置是无效的。如效果边框为边框应用图片 border-radius是向元素添加圆角边框。 使用方法: border-radius:10px;/* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4...

    baihe 评论0 收藏0
  • css3

    css3新增选择器 属性选择器 包括h5中新增的自定义属性 p[data-id]{color: red} sasas 属性选择器可以指定属性值 的样式变化 E[attr=value] 指定属性名 p[data-id=111]{color: red} sasas1 sasas2 sasas3 只有第一行才会...

    RancherLabs 评论0 收藏0
  • 基础知识:css3核心知识整理

    摘要:前缀浏览器兼容根据了解,属性大部分支持,部分支持,少部分支持前缀苹果谷歌火狐浏览器世界之窗例如兼容转换过渡关键帧动画转换及以上支持,需添加前缀属性的方法使用缩放轴缩放倍,轴缩放倍,只有一个值时为缩放倍数倾 css3前缀(浏览器兼容) 根据了解,css3属性大部分支持ie10,部分支持ie9,少部分支持ie8 // 前缀 // -webkit- Safari and Chrome(...

    kycool 评论0 收藏0

发表评论

0条评论

MonoLog

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<