首页 > 其他分享 >CSS3边框属性 阴影 box-shadow 属性

CSS3边框属性 阴影 box-shadow 属性

时间:2023-04-09 09:34:19浏览次数:53  
标签:CSS3 box 模糊 阴影 inset shadow 属性

box-shadow 属性各个参数的含义

说明
h-shadow 必需的。水平阴影的位置。允许负值 
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离,使用类似高斯模糊的算法将阴影进行模糊处理,模糊后阴影的范围将扩大,扩大的距离为blur/2
spread 可选。阴影的大小:在原来阴影的大小上,各个方向同时扩大spread
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。向盒子内部延伸阴影

阴影的大小默认是跟盒子大小一致的(含boeder),h-shadow和v-shadow只会改变阴影的水平和垂直位置,不会改变大小,spread则会改变阴影的面积大小,

blur负责将阴影进行模糊处理,inset决定是否向元素内部方向产生阴影--内阴影 color 则决定阴影的颜色和透明度


我们可以同时设置多种效果的阴影

比如:

style{
.div{
    box-shadow: inset 0 0 6px #fff,
                inset 3px 0 6px #eaf5fc,
                inset 2px -2px 10px #efcde6,
                inset 0 0 60px #f9f6de,
                0 0 20px #fff;
}
}

 

标签:CSS3,box,模糊,阴影,inset,shadow,属性
From: https://www.cnblogs.com/cui-ting/p/17299833.html

相关文章

  • 小程序自定义组件 - 数据方法与属性
    这块在组件中的定义和使用,同vue是大致相同的.在小程序组件中定义在.js的Component()中即可.data和methods小程序中,组件数据要定义在data中,而事件处理函数和自定义方法都定义在methods中.以一个页面点击+1的例子作为演示:(还是之前的cj组件)组件......
  • Python 进阶指南(编程轻松进阶):十七、Python 风格 OOP:属性和魔术方法
    原文:http://inventwithpython.com/beyond/chapter17.html很多语言都有OOP特性,但是Python有一些独特的OOP特性,包括属性和魔术方法。学习如何使用这些Python风格技巧可以帮助您编写简洁易读的代码。属性允许您在每次读取、修改或删除对象的属性时运行一些特定的代码,以......
  • Arrays.stream().boxed()的使用
    Arrays.stream().boxed()的使用0.写在前面1.Arrays.stream()的使用算法:代码:输出结果:2.boxed()的使用boxed()方法实现在原始类型「primitives」和盒式类型「boxed」之间转换数组3.参考0.写在前面文章翻译自以下本文的最后链接1.Arrays.stream()的使用算法:获取要转换的数组。使......
  • 内核实验(二):自定义一个迷你Linux ARM系统,基于Kernel v5.15.102, Busybox,Qemu
    原文:https://blog.csdn.net/yyzsyx/article/details/129576582文章目录一、篇头二、内核部分2.1源码下载2.1.1官网2.1.2镜像站点2.1.3代码下载2.2编译2.2.1设置工具链2.2.2配置2.2.3make2.2.4编译成功三、busybox部分3.1源码下载3.2编译3.2.1配置3.2.3编译3.2.4查......
  • Xbox Series X 完全关机教程 All In One
    XboxSeriesX完全关机教程AllInOne主机的风扇完全停止工作✅https://www.douyin.com/video/7193633798267915581https://www.biaopan8.com/9985.html(......
  • Vue进阶(四十九):在Webapp上使用input:file, 指定capture属性调用默认相机,摄像,录音功能
    在webapp上使用input:file,指定capture属性调用默许相机,摄像,录音功能。在webapp上使用input:file,指定capture属性调用默认相机,摄像,录音功能在iOS6下开发webapp,使用input之file,很有用<inputtype="file"accept="image/*"capture="camera"><inputtype="file"acce......
  • 盒子模型常用属性
    盒⼦的位置和⼤⼩尺寸宽度width:⻓度|百分⽐|auto⾼度height边界marginpadding上右下左|上下左右padding与marginpadding:10px10px10px10px//上左下右padding:5px10px //上下边距5px、左右边距10pxpadding:5px10px20px//上边距左右边距下边距p......
  • EasyARM i.MX283A 完整系统制作指南(Linux 4.13.2+U-Boot 2017.09+BusyBox 1.27.2+Qt5
    原文:https://www.taterli.com/3213/标题老长呢.反正什么都是新的,所有都是开源的,除了下载工具以外,所有源码都有(据说下载工具也有,我懒得找了.),编译器源码自己也能做,但是没必要了.代码下载地址:https://github.com/nickfox-taterli/imx283a-new/releases/tag/v0.1首先有一个U......
  • C# TextBox输入文本自动滚!
    控件名:txtDgv修改控件的属性:this.txtDgv.ScrollBars=System.Windows.Forms.ScrollBars.Both;给控件添加事件。事件内部代码如下:privatevoidtxtDgv_TextChanged(objectsender,EventArgse){txtDgv.SelectionStart=txtDgv.Text.Length;......
  • How to use Xbox Series X as a DVD player All In One
    HowtouseXboxSeriesXasaDVDplayerAllInOne如何把XboxSeriesX做为一个DVD播放器使用Blu-rayPlayer蓝光播放器SetupandinstalltheBlu-rayandDVDplayerapponXbox在Xbox上设置和安装蓝光和DVD播放器应用程序TowatchBlu-rayorDVDmovi......