CSS教程 css样式

【CSS教程】【Web前端基础】css3阴影边框怎么设置

2020-11-02 11:36发布

站内问答 / CSS3
3536 8 8
发送
8条回答
summer
2楼 · 2020-11-02 13:30

box-shadow: 3px 3px 2px #ccc;”来设置图层阴影

参数说明：垂直偏移，水平偏移，阴影宽度和阴影颜色

aijingda
3楼 · 2020-11-02 15:12

定义和用法

box-shadow 属性向框添加一个或多个阴影。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

默认值：none
继承性：no
版本：CSS3
JavaScript 语法：object.style.boxShadow="10px 10px 5px #888888"

语法

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

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值描述测试
h-shadow必需。水平阴影的位置。允许负值。测试
v-shadow必需。垂直阴影的位置。允许负值。测试
blur可选。模糊距离。测试
spread可选。阴影的尺寸。测试
color可选。阴影的颜色。请参阅 CSS 颜色值。测试
inset可选。将外部阴影 (outset) 改为内部阴影。测试


cc收获啦
4楼 · 2020-11-02 16:34

在CSS3中，我们可以使用box-shadow属性轻松地为元素添加阴影效果。

语法：

box-shadow：x-shadow  y-shadow  blur  spread  color  inset;

说明：

（1）x-shadow：设置水平阴影的位置（X轴），可以使用负值；

（2）y-shadow：设置垂直阴影的位置（y轴），可以使用负值；

（3）blur：设置阴影模糊半径；

（4）spread：扩展半径，设置阴影的尺寸；

（5）color：设置阴影的颜色；

（6）inset：这个参数默认不设置。默认情况下为外阴影，inset表示内阴影。


我想吃肉
5楼 · 2020-11-02 17:17 
如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。
　　最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。
　　这里就涉及到一个绝对定位的问题，上、下、左、右四种方向的三角形相对于父级定位是不同的。首先我们来看下，当定位都为0（left:0px; top:0px;）时，会发生什么。
　　html：　　
　　　　css:
　　/*向上*/
　　.triangle_border_up{
　　width:0;
　　height:0;
　　border-width:0 30px 30px;
　　border-style:solid;
　　border-color:transparent transparent #333;/*透明 透明  灰*/
　　margin:40px auto;
　　position:relative;
　　}
　　.triangle_border_up span{
　　display:block;
　　width:0;
　　height:0;
　　border-width:0 28px 28px;
　　border-style:solid;
　　border-color:transparent transparent #fc0;/*透明 透明  黄*/
　　position:absolute;
　　top:0px;
　　left:0px;
　　}
　　/*向下*/
　　.triangle_border_down{
　　width:0;
　　height:0;
　　border-width:30px 30px 0;
　　border-style:solid;
　　border-color:#333 transparent transparent;/*灰 透明 透明 */
　　margin:40px auto;
　　position:relative;
　　}
　　.triangle_border_down span{
　　display:block;
　　width:0;
　　height:0;
　　border-width:28px 28px 0;
　　border-style:solid;
　　border-color:#fc0 transparent transparent;/*黄 透明 透明 */
　　position:absolute;
　　top:0px;
　　left:0px;
　　}
　　/*向左*/
　　.triangle_border_left{
　　width:0;
　　height:0;
　　border-width:30px 30px 30px 0;
　　border-style:solid;
　　border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
　　margin:40px auto;
　　position:relative;
　　}
　　.triangle_border_left span{
　　display:block;
　　width:0;
　　height:0;
　　border-width:28px 28px 28px 0;
　　border-style:solid;
　　border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
　　position:absolute;
　　top:0px;
　　left:0px;
　　}
　　/*向右*/
　　.triangle_border_right{
　　width:0;
　　height:0;
　　border-width:30px 0 30px 30px;
　　border-style:solid;
　　border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
　　margin:40px auto;
　　position:relative;
　　}
　　.triangle_border_right span{
　　display:block;
　　width:0;
　　height:0;
　　border-width:28px 0 28px 28px;
　　border-style:solid;
　　border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
　　position:absolute;
　　top:0px;
　　left:0px;
　　}
　　效果如图：
　　为什么不是我们预想的如下图的样子呢
　　原因是，我们看到的三角形是边，而不是真的具有内容的区域，请回忆下css的盒子模型的内容。
　　绝对定位（position:absolute），是根据相对定位父层内容的边界计算的。
　　再结合上篇我们最开始写的宽高为0的空div:
　　这个空的div，content的位置在中心，所以内部三角形是根据中心这个点来定位的。
　　为了看清楚一些，我们使用上一次的方法，给span增加一个阴影：
　　1
　　box-shadow:0 0 2px rgba(0,0,0,1);
　　效果如图：
　　这回我们明确的知道了，内部的三角形都是根据外部三角形实际内容的点来定位的，而非我们肉眼看到的三角形的边界定位。
　　html不变，css：
　　　　/*向上*/
　　.triangle_border_up{
　　width:0;
　　height:0;
　　border-width:0 30px 30px;
　　border-style:solid;
　　border-color:transparent transparent #333;/*透明 透明  灰*/
　　margin:40px auto;
　　position:relative;
　　}
　　.triangle_border_up span{
　　display:block;
　　width:0;
　　height:0;
　　border-width:0 28px 28px;
　　border-style:solid;
　　border-color:transparent transparent #fc0;/*透明 透明  黄*/
　　position:absolute;
　　top:1px;
　　left:-28px;
　　}
　　/*向下*/
　　.triangle_border_down{
　　width:0;
　　height:0;
　　border-width:30px 30px 0;
　　border-style:solid;
　　border-color:#333 transparent transparent;/*灰 透明 透明 */
　　margin:40px auto;
　　position:relative;
　　}
　　.triangle_border_down span{
　　display:block;
　　width:0;
　　height:0;
　　border-width:28px 28px 0;
　　border-style:solid;
　　border-color:#fc0 transparent transparent;/*黄 透明 透明 */
　　position:absolute;
　　top:-29px;
　　left:-28px;
　　}
　　/*向左*/
　　.triangle_border_left{
　　width:0;
　　height:0;
　　border-width:30px 30px 30px 0;
　　border-style:solid;
　　border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
　　margin:40px auto;
　　position:relative;
　　}
　　.triangle_border_left span{
　　display:block;
　　width:0;
　　height:0;
　　border-width:28px 28px 28px 0;
　　border-style:solid;
　　border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
　　position:absolute;
　　top:-28px;
　　left:1px;
　　}
　　/*向右*/
　　.triangle_border_right{
　　width:0;
　　height:0;
　　border-width:30px 0 30px 30px;
　　border-style:solid;
　　border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
　　margin:40px auto;
　　position:relative;
　　}
　　.triangle_border_right span{
　　display:block;
　　width:0;
　　height:0;
　　border-width:28px 0 28px 28px;
　　border-style:solid;
　　border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
　　position:absolute;
　　top:-28px;
　　left:-29px;
　　效果如图：
　　进一步来写气泡框的三角形，如图所示：
　　html：
　　　　　　三角形　　　　纯css写带边框的三角形
　　　　　　css：
　　.test_triangle_border{
　　width:200px;
　　margin:0 auto 20px;
　　position:relative;
　　}
　　.test_triangle_border a{
　　color:#333;
　　font-weight:bold;
　　text-decoration:none;
　　}
　　.test_triangle_border .popup{
　　width:100px;
　　background:#fc0;
　　padding:10px 20px;
　　color:#333;
　　border-radius:4px;
　　position:absolute;
　　top:30px;
　　left:30px;
　　border:1px solid #333;
　　}
　　.test_triangle_border .popup span{
　　display:block;
　　width:0;
　　height:0;
　　border-width:0 10px 10px;
　　border-style:solid;
　　border-color:transparent transparent #333;
　　position:absolute;
　　top:-10px;
　　left:50%;/* 三角形居中显示 */
　　margin-left:-10px;/* 三角形居中显示 */
　　}
　　.test_triangle_border .popup em{
　　display:block;
　　width:0;
　　height:0;
　　border-width:0 10px 10px;
　　border-style:solid;
　　border-color:transparent transparent #fc0;
　　position:absolute;
　　top:1px;
　　left:-10px;
　　}
　　(2)东北、东南、西北、西南三角形的写法
　　继续，来写西北方（↖），东北方（↗），西南方（↙），东南方（↘）的三角形。
　　原理如图：
　　根据颜色的划分，每个可以有两种css来写，分别利用不同的边来创造所需三角形。
　　写一个nw（↖）的例子：
　　html：
　　1
　　　　css(1)：
　　　　.triangle_border_nw{
　　width:0;
　　height:0;
　　border-width:30px 30px 0 0;
　　border-style:solid;
　　border-color:#6c6 transparent transparent transparent;
　　margin:40px auto;
　　position:relative;
　　}
　　css(2)：
　　.triangle_border_nw{
　　width:0;
　　height:0;
　　border-width:0 0 30px 30px;
　　border-style:solid;
　　border-color:transparent transparent transparent #6c6;
　　margin:40px auto;
　　position:relative;
　　}
　　两种css效果均如图所示：
　　以上是利用css写三角形，晋级到
　　(1)有边框的三角形
　　(2)东北、东南、西北、西南三角形的写法
我是大脸猫
6楼 · 2020-11-03 09:24

一、使用text-shadow属性为文本添加阴影

二、使用box-shadow属性为边框添加阴影

 

一、为文本添加阴影 text-shadow

    使用text-shadow，可以在不使用图像表示文本的情况下，为段落、标题等元素中的文本添加动态的阴影效果。（有继承性）

    浏览器兼容：IE、Chrome、Firefox、Opera、Safari等所有主流浏览器都支持 text-shadow 属性。Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。

（一）text-shadow用法

语法  text-shadow：h-shadow  v-shadow  blur  color；比如 :

  • #b1{text-shadow:5px 5px #aaa;} 表现效果   

  • #b2{text-shadow:-6px -6px #ccc;}  表现效果   

  • #b3{text-shadow:2px 2px 10px #000;}  表现效果     

text-shadow的四个值，（前三个值带长度单位，四个值之间不需逗号分隔）：

  • h-shadow   水平阴影的位置，值可以为负数（不可省略）

  • v-shadow   垂直阴影的位置，值可以为负数（不可省略）

  • blur              模糊的距离（可选）

  • color            阴影的颜色（可选）

  • none            默认值（text-shadow:none 可以取消文字的阴影效果）

注意：一个元素添加多个阴影样式，每组属性之间用逗号分隔，每个阴影有（2~3个）长度值和1 个可选的颜色值进行规定。省略的长度是 0。

实例：添加多个阴影样式

复制代码

 1  2  3  4      5     css3文字阴影 6     12 13 14     
一个元素多个阴影样式
15 16 

复制代码

表现效果

 （二） text-shadow应用

1、 白色文本的阴影效果

 #b1{color:white; text-shadow:2px 2px 4px #000;}

表现效果         

2、霓虹灯效果的文本阴影

 

#b1{text-shadow:0 0 3px #f0f;}

表现效果             

 

 

 二、为边框添加阴影 box-shadow

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

     浏览器兼容：IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 浏览器支持 box-shadow 属性。如果希望浏览器兼容旧的Android、Mobile Safari和Safari浏览器，那么box-shadow需要加上-webkit- 厂商前缀。

（一）box-shadow的用法

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

  • box-shadow:4px 4px 5px 3px #999;     表现效果  

  • box-shadow:4px 4px 5px #999;            表现效果   

 

  • box-shadow:-4px -4px 5px #999;         表现效果                                  （h-shadow 和 v-shadow设置为负值时阴影位置改变）

  • box-shadow:0 0 9px 3px #999;            表现效果       

     

box-shadow的六个值，如下：

  • h-shadow   水平阴影的位置，值可以为负数（不可省略）

  • v-shadow   垂直阴影的位置，值可以为负数（不可省略）

  • blur              模糊的距离（可选）

  • spread         阴影的距离（可选）

  • color            阴影的颜色（可选）

  • inset             将外部阴影(outset)改成内部阴影（可选）

  • none            默认值（box-shadow:none 可以取消边框的阴影效果）

注释：可向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 （2~4） 个长度值、1个可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

实例：添加多个阴影样式

 

复制代码

 1  2  3  4      5     css3边框阴影 6     18 19 20     
21 22 

复制代码

 

表现效果


哆啦公
7楼 · 2020-11-03 10:50

-webkit-box-shadow:0px 3px 3px #c8c8c8 inset;-moz-box-shadow:0px 3px 3px #c8c8c8 inset;box-shadow:0px 3px 3px #c8c8c8 inset;；重点是最后的inset，不加的话就是外阴影

py大白
8楼 · 2020-12-01 12:11

在CSS3中，我们可以使用box-shadow属性轻松地为元素添加阴影效果。

语法：

box-shadow：x-shadow  y-shadow  blur  spread  color  inset;

说明：

（1）x-shadow：设置水平阴影的位置（X轴），可以使用负值；

（2）y-shadow：设置垂直阴影的位置（y轴），可以使用负值；

（3）blur：设置阴影模糊半径；

（4）spread：扩展半径，设置阴影的尺寸；

（5）color：设置阴影的颜色；

（6）inset：这个参数默认不设置。默认情况下为外阴影，inset表示内阴影。


希希
9楼 · 2021-12-10 09:39

说明：

（1）x-shadow：设置水平阴影的位置（X轴），可以使用负值；

（2）y-shadow：设置垂直阴影的位置（y轴），可以使用负值；

（3）blur：设置阴影模糊半径；

（4）spread：扩展半径，设置阴影的尺寸；

（5）color：设置阴影的颜色；

（6）inset：这个参数默认不设置。默认情况下为外阴影，inset表示内阴影。


回答: 2021-12-10 09:40

参数说明：垂直偏移，水平偏移，阴影宽度和阴影颜色

相关问题推荐

  • 【Web前端基础】css绝对定位和相对定位区别CSS教程 2020-12-14 14:06
    回答 11

    一、position 的四个值：static、relative、absolute、fixed。绝对定位：absolute 和 fixed 统称为绝对定位相对定位：relative默认值：static二、relative定位与absolute定位的区别实例：HTML代码：css代码：初始效果：1、relative：相对于原来位置移动，元素...

  • 【Web前端基础】css定位元素的方式CSS教程 2020-12-11 11:21
    回答 14

    1.static:正常文档定位，此时top,bottom,left和z-index属性无效，块级元素从上往下纵向排布，行级元素从左往右排列2.relative: 相对定位，此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移，来确定元素位置，比如一个绝...

  • 【Web前端基础】css相对定位的使用条件是什么CSS教程 2020-12-11 11:20
    回答 8

    设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于它的起点进...

  • 【Web前端基础】css浮动和定位有什么区别CSS教程 2020-12-04 14:16
    回答 15

    浮动和定位都可以使元素脱离标准文档流,提升层级,  浮动脱离文档流，提高半个层级，不能完全覆盖下面元素（不能覆盖图片文字）定位脱离标准文档流，提升一个层级，可以完全覆盖下面元素及其内容...

  • 【Web前端基础】css定位如何理解CSS教程 2020-12-04 14:15
    回答 7

    绝对定位就是你的位置已经不属于你了，你只能漂浮在半空中。相对定位就是你的位置你还占用的，人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的，都找不到的话就以body窗口来定位。...

  • 【Web前端基础】css定位方式有哪几种CSS教程 2020-12-02 09:56
    回答 17

    定位：1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容

  • 【Web前端基础】css浮动条件是什么CSS教程 2020-12-02 09:53
    回答 5

    css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起，举个例子来说吧，就比如有两个div盒子在网页中显示，一个盒子里展示的是图片，另一个盒子中展示的是文字，他们虽说自己占有的位置不大，可是他们却各占一行来显示，这可...

  • 【Web前端基础】如何触发css bfcCSS教程 2020-12-01 11:39
    回答 7

    引言：这篇文章是我对BFC的理解及总结，带你揭开BFC的面纱。你将会知道BFC是什么，形成BFC的条件，BFC的相关特性，以及他的实际应用。一、何为BFC       BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的...

  • 如何循环淡入淡出图片css样式 2021-12-09 09:17
    回答 9

    jQuery自带淡入淡出效果 https://www.w3school.com.cn/jquery/jquery_fade.asp 看看这个 

  • 引入css文件失败，求解答css样式 2021-03-18 11:23
    回答 11

    这种情况可能是中文注释的原因，css并没有规定不允许中文注释，但是我也曾经遇到过这种问题，抱歉无法解析透彻。解决方法：备份后，一个一个删除中文注释。也许突然删除一条后你就发现成功了...

  • 过渡和动画的区别？css样式 2020-11-27 19:17
    回答 9

    css过渡与动画主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。css过渡与动画区别总结：1、动画不需要事件触发，过渡需要。2、...

  • 【Web前端基础】css3过渡触发机制是什么css样式 CSS教程 2020-11-03 09:31
    回答 6

    过渡的触发机制: 伪类触发 ：hover ：active ：focus ：checked 媒体查询：通过@media属性判断设备的尺寸，方向等 JavaScript触发：用JavaScript脚本触发 示例: /*设置过渡*/ img {     /*为防止浏览器兼容性，需要加上前缀*/           ...

  • 【Web前端基础】css3过渡属性有几种CSS教程 css样式 2020-11-03 09:30
    回答 5

    有效的过渡属性包括：background, position, border, color,margin, padding, height, width, outline, visibility, opacity, zindex,line-height, letter-spacing, word-spacing, min/maxlength/height/width, text的一些属性等等tra...

  • 【Web前端基础】css3如何实现圆角边框CSS教程 css样式 2020-11-02 11:35
    回答 5

    在进行页面布局时，DIV边框默认是矩形边框，想让边框为圆角时，可以用CSS3的border-radius这一属性来实现。例如：想让div盒子边框四个角都为半径为10px的圆角时具体代码如下：效果图：下面对border-radius具体细节进行介绍：语法：border-radius: 1-4 length|...

  • 【Web前端基础】css3边框背景怎么写CSS教程 css样式 2020-10-29 09:40
    回答 7

    一、css3边框1、border-image 边框border-image: url(xxx.png) numberstretch 很好理解就是拉伸，有多长拉多长。repeat (和4角上 同等大小图片进行平铺 当边框中间区域长度不是4角图片大小的整数倍时 会被切割)铺满(round)(4角上的图片 进行拉伸平铺 不会被切...

没有解决我的问题，去提问