DIV四个边框分别设置阴影样式

news/2024/10/21 10:20:08/

原点为基点,原点左侧为x轴负方向,值为负,右侧为正;原点下方为y轴正方向,值为正,上方为负。如上图箭头所指。

官方用语:     box-shadow:1px 2px 3px 4px #ccc inset;

来分别看一下以上六个值的含义: 1px  从原点开始,沿x轴正方向的长度(倘若为负值,为沿x轴负方向的长度);

                   2px  从原点开始,沿y轴正方向的长度;(倘若为负值,为沿y轴负方向的长度);

                   3px  阴影的模糊度,只允许为正值;

                   4px  阴影扩展半径;

                   #ccc  阴影颜色;

                   inset  设置为内阴影(如果不写这个值,默认为外阴影);

外阴影      内阴影

/*说明:(以上部边为例进行说明)
1. 对于上边,沿x轴方向的偏移量显然没有意义,设为0px;
2. 沿y轴正方向阴影进入div内部,不显示,因此写为负数;
3. 扩展半径不要写,或者写成0px,这样就不会影响其他的边;
4. 颜色自定;
5. 模糊程度按需要自定;
6. 下、左、右边阴影按规律类推。
*/box-shadow:    0px -10px 0px 0px #ff0000,   /*上边阴影  红色*/-10px 0px 0px 0px #3bee17,   /*左边阴影  绿色*/10px 0px 0px 0px #2279ee,    /*右边阴影  蓝色*/0px 10px 0px 0px #eede15;    /*下边阴影  黄色*/

效果:

 


http://www.ppmy.cn/news/856589.html

相关文章

CSS 边框颜色

CSS 边框颜色 <!DOCTYPE html> <html> <head> <style> p.one {border-style: solid;border-color: #ff0000; /* 红色 */ }p.two {border-style: solid;border-color: #0000ff; /* 蓝色 */ }p.three {border-style: solid;border-color: #bbbbbb; /* 灰…

简单的CSS设置div边框样式

今天工作干完了&#xff0c;想到前几天一个CSS新手让我帮他美化一下他的Div边框&#xff0c;索引想到不如写一个CSs小教程 &#xff0c;帮助更多的CSs新手学会以如何用CSS来美化网页上的边框&#xff0c;不只是Div&#xff0c;其实其它元素的美化方法和Div是一样的&#xff0c;…

html的边框设置

目录 理论知识&#xff1a; 示例一&#xff1a;简单边框 示例二&#xff1a;边框和表格 示例三&#xff1a;边框和图片 示例四&#xff1a;边框和文章 理论知识&#xff1a; 边框的写法&#xff1a; border: 边框的宽度 样式 颜色; 边框的四种样式&#xff1a;solid…

html圆点边框颜色,css设置div边框颜色

div边框色调 css设置装备摆设div边框色采 使用css对div边框设置色采是思空见贯CSS花式设置装备摆设。对div边框颜色设置说需要css单词为border。 去领会干系教程&#xff1a;《CSS边框》教程 一、div四条边的边框颜色配置 如果不设置边框宽度粗细&#xff0c;只配置border-colo…

div盒子双线边框线内的颜色处理方法

本人是萌新一枚&#xff0c;刚刚接触h5c3&#xff0c;如有不足&#xff0c; 请各位大佬多多指教&#xff01; 这个问题是我在写作业时发现的&#xff0c;我以为有什么属性可以去控制双线边框线内的颜色&#xff0c;我在CSDN上搜了之后并没有发现有什么可以去解决这个问题的方法…

html中div边界线颜色,Html 中如何设置 div边框的颜色?

回答&#xff1a; div的visibility可以控制div的显示和隐藏&#xff0c;但是隐藏后页面显示空白: 1 2 3 style"visibility:none;" document&#xff0c;getElementById("typediv1")&#xff0c;style&#xff0c;visibility"hIDden";//隐藏 docu…

Linux驱动进阶(三)——中断与时钟机制

文章目录 前言中断简述中断的概念中断的宏观分类中断产生的位置分类同步和异步中断中断小结 中断的实现过程中断信号线(IRQ)中断控制器中断处理过程中断的安装与释放 按键中断实例按键设备原理图有寄存器设备和无寄存器设备按键设备相关端口寄存器 按键中断实例程序分析按键驱动…

设置div边框样式

设置div边框样式&#xff1a; /*设置边框的方式:*/ 1. border:1px solid red; 2. border-width:1px;边框的粗细 border-style: solid;边框的风格 border-color: red;边框的颜色 3. border-left:1px solid red;border-right:1px solid blue;border-top:1px solid green;border-…