码迷,mamicode.com
首页 > 其他好文 > 详细

文本阴影和边框阴影

时间:2019-08-25 01:17:11      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:round   box   没有   img   特效   距离   怎么   ext   文字   

文本阴影

语法  text-shadow:h-shadow  v-shadow  blur  color;

在CSS3之前,除非使用图片,否则无法给文本添加阴影效果。现在,使用text-shadow属性,可以为文本添加一个或多个阴影及模糊效果。前两个0ffset必需添加,后两个clur,color可选!

技术图片

不管是偏移,还是模糊,都不会改变元素本身的尺寸。因此,发生偏移、模糊后,阴影可能会超出元素本身,延伸到元素的边界之外。

除了单阴影外,还可以使用逗号分隔的阴影列表,为文本设置多重阴影效果。通过多重阴影的叠加,可以实现很多有趣的效果。如,word中的空心文字、阳文、阴文这些文本特效,都可以通过多重阴影来实现。

在文本的上、下、左、右四个方向各添加1px的黑色阴影,可以实现空心文字效果;在文本的左上和右下各添加 1px的错位补色阴影,可以实现阳文文字效果;把阳文的左上和右下的阴影颜色颠倒,即可实现阴文文字效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    p{font-size:50px;
        color: white}
    .b1{text-shadow:-1px 0 #000, 0 1px red, 1px 0 blue, 0 -1px yellow;}
    .b2{text-shadow:-1px -1px red, 1px 1px blue}
    .b3{text-shadow:1px 1px red, -1px -1px blue}
    </style>
</head>
<body>
    <p class="b1">空心效果</p>
    <p class="b2">阳文效果</p>
    <p class="b3">阴文效果</p>

</body>
</html>

 技术图片

为边框添加阴影 box-shadow

使用box-shadow可以为元素本身添加阴影,即向边框添加一个或多个阴影。(不可继承)

语法 box-shadow: h-shadow v-shadow blur spread color inset;

外阴影:box-shadow: X轴  Y轴  Rpx  color; 属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值(大小)    阴影的颜色内阴影:box-shadow: X轴  Y轴  Rpx  color  inset;默认是外阴影   内阴影:inset 可以设置成内部阴影

box-shadow的六个值,如下:

  • h-shadow   水平阴影的位置,值可以为负数(不可省略)
  • v-shadow   垂直阴影的位置,值可以为负数(不可省略)
  • blur              模糊的距离(可选)
  • spread         阴影的距离(可选)
  • color            阴影的颜色(可选)
  • inset             将外部阴影(outset)改成内部阴影(可选)
  • none            默认值(box-shadow:none 可以取消边框的阴影效果)

为了更好的了解box-shadow的特征,做几个小测试:(为了方便直接在标签内嵌套样式)

 测试1: <div style="box-shadow: 0 0 10px #f00; border:1px solid green"></div>  box-shadow: 0 0 10px #f00  (因没有使其X轴与Y轴移动 设置值 所在会在本身发生作用   半径范围,颜色)
技术图片

测试2: <div style="box-shadow:4px 4px 10px #f00; border:1px solid green"></div> box-shadow:4px 4px 10px #f00;与测试1不同 X轴与Y轴改变了正值(正值 向右 向下) 所以变成了这样‍
技术图片

测试3:<div style="box-shadow:-4px -4px 10px #f00; border:1px solid green"></div> box-shadow:-4px -4px 10px #f00;与测试2不同 之处是 X轴与Y轴改变成了负值(负值 向左 向上) 所以变成了这样‍
技术图片

测试4:<div  style="box-shadow:-10px 0px 10px red,   /*左边阴影*/ 
                                                   0px -10px 10px #000,  /*上边阴影*/ 
                                                   10px 0px 10px green,  /*右边阴影*/ 
                                                   0px 10px 10px blue;" /*下边阴影*/ ></div>

你看到这样的代码会感觉很乱 但是看到效果图片之后你就能明白这是怎么做的了无非改一下X轴与Y轴位置与颜色值 还有阴影值大小,(用逗号隔开)

技术图片

 

测试5:--内阴影  <div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div> box-shadow: 0px 0px 10px red inset;    与上面写法相同 唯一不同的是添加了一个inset 其它属性与外阴影相同

技术图片

 

文本阴影和边框阴影

标签:round   box   没有   img   特效   距离   怎么   ext   文字   

原文地址:https://www.cnblogs.com/niuyaomin/p/11406546.html

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