码迷,mamicode.com
首页 > Web开发 > 详细

(box-shadow)阴影 -CSS3 注:外阴影

时间:2018-12-14 22:43:57      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:sha   strong   特效   必须   ffffff   升级版   多少   chrome   shadow   

注:阴影有多种书写方法,属性可分开书写,也可写成符合样式

 
简介:CSS3是 CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
 
兼容问题:因为是CSS3的升级版本,所以所写代码会存在兼容性问题,由于浏览器有很多,版本也各有差异,用不同的浏览器必须注意处理其出现的的问题。不过用chrome(谷歌)、firefox(火狐)等基本不会出现兼容性问题,可放心使用。
 
 
加阴影的属性:box-shadow
 
属性值书写方式:box-shadow:1px(水平位移) 2px(垂直位移) 3px(模糊半径) #ffffff(阴影颜色)
 
水平位移:水平位移数值为零时,水平方向没有阴影存在,即左右不存在阴影;
                  水平位移数值为正值时,水平方向有阴影存在,阴影在右侧显示;
                  水平位移数值为负值时,水平方向有阴影存在,阴影在左侧显示;
 
垂直位移:水平位移数值为零时,水平方向没有阴影存在,即上下不存在阴影;
                  水平位移数值为正值时,水平方向有阴影存在,阴影在下方显示;
                  水平位移数值为负值时,水平方向有阴影存在,阴影在上方显示;
 
模糊半径:指阴影平铺的距离,即当前阴影存在多少区域内;
                  阴影区域越大阴影显示的越淡;
                  阴影区域越小阴影显示的越重;
 
练习、熟悉:可在百度搜索css3 的box-shadow阴影模拟器进行模拟。
 

(box-shadow)阴影 -CSS3 注:外阴影

标签:sha   strong   特效   必须   ffffff   升级版   多少   chrome   shadow   

原文地址:https://www.cnblogs.com/gyw1996/p/10121751.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!