CSS-盒子阴影和文字阴影

1、盒子阴影:

盒子的阴影分内外阴影,默认情况是外阴影

  • box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展(影子大小) 阴影颜色 内外阴影
    内阴影取值(inset)
    外阴影取值(默认值,outset,注意:如果将outset写在代码中会没有效果,所以如果是外阴影可忽略不写)
  • 可以简写成:box-shadow:10px 10px 10px;分别表示水平、垂直位移和模糊度(阴影的颜色默认和盒子的内容一致

2、文字阴影

  • text-shadow:水平偏移量 垂直偏移量 模糊度 阴影颜色
  • 可以简写成:box-shadow:10px 10px 10px;分别表示水平、垂直位移和模糊度(默认情况下阴影颜色和文字颜色一致
    可同时写多个,用逗号隔开:text-shadow:水平偏移量 垂直偏移量 模糊度 阴影颜色, 水平偏移量 垂直偏移量 模糊度 阴影颜色...

实现凹凸文字效果

image.png

原理:凸文字的特点是:字体的下侧和右侧呈暗,上侧和左侧呈亮,而凹文字则相反

  • text-shadow: 1px 1px 1px black, -1px -1px 1px white;/凸文字/
  • text-shadow: -1px -1px 1px black, 1px 1px 1px white;/凹文字/
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 盒子阴影 如何给盒子添加阴影box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影; 注...
    喝酸奶要舔盖__阅读 452评论 0 0
  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 2,330评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,748评论 0 7
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,706评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,418评论 0 11

友情链接更多精彩内容