如何给边框添加阴影效果

article/2025/9/16 14:54:11

css的box-shadow是用来添加边框阴影效果的。


属性值详解:

1、inset
可选值,默认阴影在盒子外
使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴影依然存在。

2、<offset-x> <offset-y>
这是头两个<length> 值,用来设置阴影偏移量。offset-x为设置阴影的水平位移,假如是负值,那么阴影在边框的左侧;offset-y设置阴影的垂直位移,假如是负值,那么阴影位于边框顶部。这个用数学中的数轴来理解应该是可以的,如下图:
css数轴

我们的水平原点是以边框的左上角为起始点,x为水平位移,Y为垂直位移。

3、<blur-radius>
指定模糊半径,不允许负值,假如设置为0,则阴影不模糊,否则设置越大的值,边框阴影就越模糊。

4、<spread-radius>
指定阴影拓展,假如设置为0,不拓展,正值阴影扩大,负值缩小。


demo:

(1)输入框内阴影

.shadow (
     -moz-box-shadow: inset 0 0 10px #CCC;
     -webkit-box-shadow: inset 0 0 10px #CCC;
     box-shadow: inset 0 0 10px #CCC;


(2)简单效果
.one (
     -moz-box-shadow:5px 5px;
     -webkit-box-shadow:5px 5px;
     box-shadow:5px 5px;


(3)虚阴影效果
.two (
     -moz-box-shadow:2px 2px 10px #06c;
     -webkit-box-shadow:2px 2px 10px #06c;
     box-shadow:2px 2px 10px #06c;


(4)渐变阴影效果
.three (
     -moz-box-shadow:0 0 10px #06c;
     -webkit-box-shadow:0 0 10px #06c;
     box-shadow:0 0 10px #06c;


(5)带光晕效果
.four (
    -moz-box-shadow:0 0 10px 10px #06c;
    -webkit-box-shadow:0 0 10px 10px #06c;
    box-shadow:0 0 10px 10px #06c;


(6)内阴影效果
.five (
    -moz-box-shadow:inset 5px 5px 10px #06c;
    -webkit-box-shadow: inset 5px 5px 10px #06c;
    box-shadow: inset 5px 5px 10px #06c;


(7)彩色阴影
.six (
    -moz-box-shadow:0 0 10px red,
                                   2px 2px 10px 10px yellow,
                                   4px 4px 12px 12px green;
    -webkit-box-shadow:0 0 10px red,
                                   2px 2px 10px 10px yellow,
                                   4px 4px 12px 12px green;
    box-shadow:0 0 10px red,
                                   2px 2px 10px 10px yellow,
                                   4px 4px 12px 12px green;


http://chatgpt.dhexx.cn/article/A91PpAjk.shtml

相关文章

css添加边框阴影

css边框阴影如何设置&#xff1f; 语法&#xff1a; <style> box-shadow: h-shadow v-shadow blur spread color inset; </style> 取值&#xff1a; h-shadow&#xff1a;必需设置的值&#xff0c;定义水平阴影的位置。允许负值。 v-shadow&#xff1a;必需设置…

css边框设置阴影样式

css边框设置阴影样式 box-shadow上下左右四个边框设置阴影样式 语法值/说明四个不同样式实现效果 语法 box-shadow: h-shadow v-shadow blur spread color inset;注意&#xff1a;boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表&#xf…

css添加边框阴影上、下、左、右详解

Css边框阴影&#xff1a;box-shadow属性 对于这个属性&#xff0c;总是记了又忘&#xff0c;忘记了又看百度&#xff0c;今天总结一下&#xff1b; 语法&#xff1a; box-shadow: h-shadow v-shadow blur spread color inset;注意&#xff1a;boxShadow 属性把一个或多个下拉…

【IMX6ULL驱动开发学习】02.IMX6ULL烧写Linux系统

由于我买的是正点原子的IMX6ULL阿尔法开发板&#xff0c;但是我是看韦东山老师视频学习的驱动 所以这里我烧录的方法是按照韦东山老师的课程来的 这里给出烧写Linux系统用到的工具 链接&#xff1a;https://pan.baidu.com/s/1bD-xxn3K8xQAVkJSaJmTzQ 提取码&#xff1a;af6w …

iMX6ULL启动流程

iMX6ULL启动流程 1. Boot ROM2. IVT和DCD3. 启动流程4. 总结 我移植的板子是讯为的TERMINATOR_V1.1开发板&#xff0c;参考板为官方 i.MX6ULL EVK开发板。 iMX6ULL uboot2021.04 linux5.15.32移植iMX6ULL启动流程iMX6ULL u-boot2021.04移植iMX6ULL linux5.15.32移植iMX6ULL bui…

IMX6ULL_Pro网卡配置

(15条消息) 【IMX6ULL_Pro板卡学习】配置 VMware 使用双网卡_vmware配置双网卡_爱学习的小莲的博客-CSDN博客https://blog.csdn.net/qq_52201194/article/details/127474352?ops_request_misc%257B%2522request%255Fid%2522%253A%2522168223524716800182730924%2522%252C%2522…

imx6 adb移植

参考https://blog.csdn.net/kunkliu/article/details/122746762 一、buildroot配置 1.udev必须选上 System configuration下 2.打开adb进程支持 3.添加配置脚本 &#xff08;1&#xff09;etc/init.d下创建文本文件 S91usb&#xff0c;内容如下&#xff08;注释掉了csdn中的两…

imx6设备树pinctrl解析

最近在移植linux&#xff0c;用到kernel版本为3.14.28&#xff0c;在高版本的内核源码中用到了设备树&#xff08;device-tree&#xff09;&#xff0c;设备树中用到pinctrl的配置&#xff0c;记录一下。 1、普通设置 在配置串口时&#xff0c;pinctrl的配置信息如下所示&#…

IMX6UL核心板

CPU:IMX6UL DDR:256M EMMC:4G NANDFLASH:1G 分立DCDC 需定制请联系QQ402979209 广州瀚忆科技有限公司 http://www.gzhysmart.com/

imx6 LCD 参数配置(lvds为例)

目前imx6的BSP开发中&#xff0c;lvds的参数配置一般在两个地方&#xff1a; 1. uboot的CMDLINE的参数设置&#xff0c;形如&#xff1a; videomxcfb0:devldb,bpp32 2. uboot板级代码中对struct display_info_t的配置&#xff0c;形如&#xff1a; static struct display_i…

IMX6U主频详解和配置

IMX6U默认396Mhz主频 可以达到528Mhz 一、时钟来源及组成 1、时钟的来源都是晶振 32.768khz的晶振 给RTC使用 24MHz的晶振给系统来使用 接在T16和T17这两个IO上 2、芯片时钟构成 七路PLL 全都由24Mhz晶振产生 使用这些的原因是为了方便外设使用 倍频产生 ①ARM PLL供给AR…

iMX6平台MAX9288调试

因为有之前Ti ds90ub964的调试经验&#xff0c;这次调9288只是当做一个常规的驱动调试&#xff0c;坑大也得到了宝贵的经验 9288&#xff08;GMSL--->MIPI CSI2&#xff09;解码器解码9291和9277编码器过来的gmsl信号 iMX6DQ的mipi csi接口寄存器控制的特性&#xff1a; …

【imx6ul】从头搭建imx6ul开发环境(uboot、内核编译及烧入、mfgtools详细使用方法)

实现一个自制的Bootloader见: 01-基于imx6ul从0自制Bootloader专栏实现总结_【星星之火】的博客-CSDN博客 硬件平台&#xff1a;自制imx6ul&#xff08;详见【ALLEGRO】从零制作imx6-PCB核心板全流程_【星星之火】的博客-CSDN博客&#xff09;系统&#xff1a;linux-4.1.15文件…

飞思卡尔IMX6处理器的GPIO配置方式

在linux或android系统中&#xff0c;假如我们要配置飞思卡尔IMX6处理器的GPIO管脚&#xff0c;比如是GPIO_19这个管脚&#xff0c;那么要像这样&#xff1a; #define MX6Q_PAD_GPIO_19__GPIO_4_5 \(_MX6Q_PAD_GPIO_19__GPIO_4_5 | MUX_PAD_CTRL(NO_PAD_CTRL))其中_MX6Q_PAD_…

迅为IMX6Q四核核心板商业级|工业级|IMX6Plus版本|IMX6D双核核心板

迅为IMX6Q核心板工业级/Plus版本 IMX6Q处理器&#xff1a;兼容单核&#xff0c;双核&#xff0c;工业级&#xff0c;汽车级&#xff0c;IMX6Q最新Plus版本&#xff0c;共用同一底板&#xff0c;高端产品无忧。 i.MX6系列针对消费电子、工业控制和汽车应用领域&#xff0c;它将…

imx6ull驱动开发经验

1、背景 imx6ull驱动开发基于正点原子的开发板&#xff0c;上面运行linux 4.1.15内核&#xff0c;根文件系统为ubuntu 16.05.5 LTS. 2、加载驱动文件chrdevbase.ko文件时&#xff0c;先使用depmod生成依赖文件时&#xff0c;提示无modules.order, modules.builtin无这两个文件…

【盘点】imx6的应用

导读: i.mx6系列应用处理器因其高性能&#xff0c;低功耗以及令人瞩目的多媒体功能等特性&#xff0c;被广泛运用于消费电子、工业以及汽车车载娱乐系统等新应用中。 今天为大家盘点一下启扬i.MX6嵌入式主板的部分实际应用。 以智能、多媒体为中心、基于触摸的设备市场正在迅速…

imx6 usb增强信号强度

USB信号 参考&#xff1a;官方文档 USB信号完整性取决于许多因素&#xff0c;如电路设计、PCB布局、堆叠和阻抗。每个产品可能彼此不同&#xff0c;因此客户需要微调参数&#xff0c;以获得最佳的信号质量。 测试板已经路由出两个USB端口:一个OTG1&#xff0c;一个主机。每个端…

iMX6ULL上手体验

CSDN仅用于增加百度收录权重&#xff0c;排版未优化&#xff0c;日常不维护。请访问&#xff1a;www.hceng.cn 查看、评论。 本博文对应地址: https://hceng.cn/2018/03/28/iMX6ULL上手体验/#more 第一次接触NXP/Freescale的SOC&#xff0c;记录拿到板子后快速上手的技巧和思维…

imx6ul 驱动详解

链表的知识&#xff1a; struct list_head { struct list_head *next, *prev; };API函数 函数 功能LIST_HEAD声明并初始化双向链表。INIT_LIST_HEAD初始化双向链表。list_add在链表头head节点后面插入一个新的节点new。list_add_tail在链表末尾tail节点后面插入一个新的节点n…