首页 > 教程 > 文章 > CSS > 正文

Css边框阴影:box-shadow属性

转载2020-02-28 13:55:09 0 623

5. color【可选】

阴影的颜色可以用任何颜色单位来表示。当我们没有设置color值的时候,默认就是黑色。

box-shadow: 10px 10px 10px 5px rgba(0,0,0,0.9);/*黑色阴影,用rgba表示,透明度为0.9*/ 

box-shadow: 10px 10px 10px 5px rgb(255,0,0);/*红色阴影,用rgb表示*/ 

box-shadow: 10px 10px 10px 5px #afe;/*浅蓝色阴影,用十六进制颜色表示法*/ box-shadow: 10px 10px 10px 5px blue;/*蓝色阴影,用颜色单词表示*/

6. inset 【可选】

默认情况下,我们设置的阴影都是外部阴影,而这个属性值的作用是将外部阴影转换成内部阴影。

box-shadow: 10px 10px 10px 5px blue; /*默认为外部阴影*/ 

box-shadow: 10px 10px 10px 5px blue inset;/*将外部阴影切换为内部阴影*/

7. 一些有趣的实践

了解了box-shadow之后,我们可以用来做一些有趣的事情。比如给阴影添加动画,对元素添加:hover伪元素,形成鼠标悬浮在元素上时,阴影扩大的效果

.test{ 
  width: 100px; 
  height: 100px; 
  background: yellow; 
  margin: 100px auto; 
  border-radius: 50%; 
  box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.9); 
  transform: scale(1); 
  transition: box-shadow 0.6s, transform 0.5s; 
}.test:hover{	width: 100px;	height: 100px;	background: yellow;	margin: 100px auto;	border-radius: 50%;	box-shadow: 0px 0px 50px 15px rgba(0,0,0,0.9);	transition: box-shadow 0.5s;
}

怎么样,box-shadow属性是不是挺有意思的?

好了,今天关于边框阴影box-shadow 属性的总结就写到这里了。鉴于刚刚做上面这个鼠标悬浮效果的时候用到了CSS3的另外两个新属性transition和transform,我打算下次来写一些这两个属性。


以上就是《Css边框阴影:box-shadow属性》的详细内容,更多请关注 “设计者在线”其它相关文章!

申明:本站文章多来自互联网,如果侵犯了你的权益,请联系站长及时处理!谢谢!!

  • 相关标签:
  • 本文由 设计者在线 原创发布,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论 条评论
  • 专题推荐

    • 帝国系统

      简介:帝国CMS系统教程,开发技巧

    • JQUERY

      简介:春节好春节好春节好春节好春节好春节好春节好春节好

    • 不忘初心牢记使命教育活动

      简介:不忘初心牢记使命教育活动

    • 我们的生活

      简介:我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活

    • 明天会更好

      简介:明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好

    推荐视频教程
    视频分类
    [!--date--]Y-m-d[!--date--]