hbuilder那个属性可以为div元素添加阴影边框

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了hbuilder那个属性可以为div元素添加阴影边框相关的知识，希望对你有一定的参考价值。

脆弱男孩
关注
css如何对上边框加阴影,CSS怎么添加阴影边框？ 转载
2021-08-03 23:51:29

脆弱男孩 

码龄3年

关注
css怎么设置边框阴影？很多人遇到这类问题都不知道怎么处理，其实利用css加阴影边框是很简单的。在CSS中可以使用Box-shadow属性或filter属性的drop-shadow()来添加阴影边框。

方法1：使用Box-shadow属性

Box-shadow属性可以向框添加一个或多个阴影。

语法：

Box-shadow: h-shadow v-shadow blur spread color inset;

属性值：

●　h-shadow：必需设置的值，定义水平阴影的位置。允许负值。

●　v-shadow：必需设置的值，定义垂直阴影的位置。允许负值。

●　blur：可选设置的值，定义模糊距离。

●　spread：可选设置的值，定义阴影的尺寸。

●　color ：可选设置的值，定义阴影的颜色。如果没有设置值，颜色值基于浏览器显示，建议设置。

●　inset：可选设置的值，设置后可将外部阴影 (outset) 改为内部阴影。 参考技术A ●h-shadow：必需设置的值，定义水平阴影的位置。允许负值。
●v-shadow：必需设置的值，定义垂直阴影的位置。允许负值。
●blur：可选设置的值，定义模糊距离。
●spread：可选设置的值，定义阴影的尺寸。
●color ：可选设置的值，定义阴影的颜色。如果没有设置值，颜色值基于浏览器显示，建议设置。
●inset：可选设置的值，设置后可将外部阴影 (outset) 改为内部阴影。

文本阴影和边框阴影

文本阴影

语法  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">
    pfont-size:50px;
        color: white
    .b1text-shadow:-1px 0 #000, 0 1px red, 1px 0 blue, 0 -1px yellow;
    .b2text-shadow:-1px -1px red, 1px 1px blue
    .b3text-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 其它属性与外阴影相同

技术图片

 

以上是关于hbuilder那个属性可以为div元素添加阴影边框的主要内容，如果未能解决你的问题，请参考以下文章

CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）

css怎样让div里的表格居中对齐

如何在swift中仅使用角半径为3条边添加阴影？

html5如何让边框发光

通过Jquery UI可拖动时应用阴影可排序

CSS如何相对同辈元素定位