css3文本、盒模型阴影、倒影、自由缩放

css3新增盒模型阴影
box-shadow:[inset] x y blur [spread] color
参数
inset:投影方式
inset:内投影
不给:外投影
x、y:阴影偏移
blur:模糊半径
spread:扩展阴影半径
先扩展原有形状,再开始画阴影
Color

文本阴影
box-shadow:x y blur color;
div {
color: #fff;
text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);
}
div {
color: rgba(255, 179, 140,0.5);
text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
}

box-reflect 倒影
direction 方向 above|below|left|right;
距离
渐变(可选)

resize 自由缩放
Both 水平垂直都可以缩放
Horizontal 只有水平方向可以缩放
Vertical 只有垂直方向可以缩放
注意:一定要配合overflow:auto 一块使用只有水平方向可以缩放

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 可视宽(高)=border+padding+width(height) 1> padding内填充(padding...
    奶瓶SAMA阅读 181评论 0 0
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,216评论 0 11
  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 2,300评论 0 1
  • 总是希望,光阴能够慢下来,日子能够简而又简。光阴的故事里,每一秒都能开出繁花朵朵。闲下来的光阴里,会多一些时...
    那些年聆听的阅读 199评论 0 0
  • 你的眸 像夜幕双子星般闪烁 温柔了 那么清澈见底的湖泊 一双手 竟变得比亲人还亲厚 温暖着 冰天雪地每一个角落 为...
    认真的红玫瑰阅读 181评论 2 1