CSS 阴影效果_css阴影-程序员宅基地

技术标签: CSS  css  

CSS中,通过text-shadowbox-shadow两个属性分别为文本和元素添加阴影效果。

CSS语法
box-shadow: h-shadow v-shadow blur spread color inset;

向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
h-shadow: 必需参数,可以为0。以元素左上角为原点,在X轴上的偏移量,可以设置正负值,代表在当前轴上正负方向的偏移量
v-shadow: 必需参数,可以为0。以元素左上角为原点,在Y轴上的偏移量,可以设置正负值,代表在当前轴上正负方向的偏移量
blur:可选参数,阴影模糊的距离,这个参数默认值为0,这时阴影的边缘部分非常尖锐
spread:可选参数,这个参数设置元素四个方向上阴影的尺寸
color:可选,阴影的颜色
inset:可选,将外部阴影(outset)改为内部阴影

text-shadow: h-shadow v-shadow blur color;

向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
h-shadow: 必需。水平阴影的位置,可以为负值
v-shadow:必需。垂直阴影的位置,可以为负值
blur:可选,阴影模糊的距离
color:可选,阴影的颜色

简单示例

只指定水平阴影和垂直阴影
<style>
h1 {
      
  text-shadow: 2px 2px;
}
</style>
<h1>Hello world!</h1>

效果图:
在这里插入图片描述

给阴影添加颜色
<style>
h1 {
      
  text-shadow: 2px 2px red;
}
</style>
<h1>Hello world!</h1>

在这里插入图片描述

阴影添加模糊效果
<style>
h1 {
      
  text-shadow: 2px 2px 5px red;
}
</style>
<h1>Hello world!</h1>

在这里插入图片描述

同时添加多个阴影
<style>
h1 {
      
  text-shadow: 2px 2px 5px red, 2px 2px 5px green;
}
</style>
<h1>Hello world!</h1>

在这里插入图片描述

借助阴影属性给文字添加边框
<style>
h1 {
      
  text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
}
</style>
<h1>Hello world!</h1>

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Dominic_W/article/details/124769333

智能推荐

YDOOK:ANSYS 进行电磁场仿真的第二步:建模、制定特性和分网_ansys的电磁场建模-程序员宅基地

文章浏览阅读620次。1. 先建立模型;2. 再在建立好的模型的各个区域中内制定特性;一般需要指定的特性有:1. 单元类型;2. 选项;3. 单元坐标系;4. 实常数;5. 材料性质。3. 通过 GUI 为模型中的各个区域赋予特性。4. 可以通过以下命令为模型的各个区域赋予特性:ASEL >> 选择..._ansys的电磁场建模

小知识 (2)_int b = max_element(a, a+4) - a;-程序员宅基地

文章浏览阅读125次。1.max_element()函数和min_element()函数,就是找最大值最小值,数组:int position=max_element(a,a+n)-a;//返回在数组中的下标int data=*max_element(a,a+n);//返回值容器: int position=max_element(v.begin(), v.end())-v.begin(); int it..._int b = max_element(a, a+4) - a;

unity2018.3版本win10 SDK和JDK 安装_unity 2018.3.1 用哪个版本的jdk-程序员宅基地

文章浏览阅读4.7k次,点赞3次,收藏13次。SDK和JDK获取:链接:https://pan.baidu.com/s/1PI54NAVJCNFpV7cPfBkg5w提取码:k4bd1、下载JDK,安装jdk8.152版本配置环境变量:在系统变量中添加:1、变量名:Java_home; 变量值:C:\Program Files\Java\jre1.8.0_152(jdk安装路径)2、变量名:ClassPath; 变量值:.;..._unity 2018.3.1 用哪个版本的jdk

Map简介_介绍一下map-程序员宅基地

文章浏览阅读2.1k次,点赞4次,收藏19次。Map简介HashMapTreeMapMap 的遍历小结Map 是一组成对的“键值对”对象,允许使用键 (key) 来查找值 (value)。它提供了一个映射表,可以通过某个对象来查找另一个对象。它也被称作关联数组,因为它将某些对象与另外一些对象关联在一起;或者称作字典,通过键对象来查找值对象,就像在字典中使用单词来定义一样。Map 基本特性:以 key-value 键值对的形式存储数据,..._介绍一下map

兄弟mfc9140cdn无法识别_兄弟Brother MFC-9140CDN打印机驱动下载-程序员宅基地

文章浏览阅读357次。兄弟Brother MFC-9140CDN打印机驱动官方版是一款专业实用的驱动程序,兄弟Brother MFC-9140CDN打印机驱动官方版可以适用于型号为MFC-9140CDN的打印机,兄弟BrotherMFC-9140CDN打印机驱动最新版主要用于解决打印机无法被电脑识别的问题,增加打印机使用的稳定性。基本参数产品定位多功能商用一体机产品类型彩色激光多功能一体机涵盖功能打印/复印..._兄弟mfc9140cdn链接打印机

Debian上安装rz/sz包_debian rz-程序员宅基地

文章浏览阅读3.9k次。在SecureCRT这样的ssh登录软件里, 通过在Linux界面里输入rz/sz命令来上传/下载文件.对于Debian, rz/sz默认没有安装所以需要手工安装. sz: 将选定的文件发送(send)到本地机器; rz:运行该命令会弹出一个文件选择窗口, 从本地选择文件上传到服务器(receive). 1. 软件安装 把安装文件上传到/tmp目录下. # cd /tm_debian rz

随便推点

win10 wifi连接不上服务器未响应,Win10无线网连不上怎么办|Win10 WIFI无法连接5招解决...-程序员宅基地

文章浏览阅读1.2k次。现在大部分用户都会使用无线连接来上网,使用电脑的朋友可能会遇上无线无法连接,Wifi连接不上的一些问题,这时相信很多朋友都会无从下手,不知道如何解决,其实通过以下5招就可以完美解决了,遇上无线连接不上的朋友赶紧来学习一下吧。第一招、无线网卡驱动问题无线网卡驱动出现问题肯定会导致上不了网,解决起来也不难。1、右键单击“开始”按钮并从菜单中选择“设备管理器”,启动到设备管理器窗口后,展开“网络适配器”..._win10无线网卡连不上wifi

php ffplay.exe输出,四、FFmpeg使用---FFmpeg程序的使用(ffmpeg.exe, ffplay.exe, ffprobe.exe)-程序员宅基地

文章浏览阅读122次。欢迎加入技术交流群群号: 552340860一、FFmpeg程序的使用(ffmpeg.exe, ffplay.exe, ffprobe.exe)本章主要介绍一下ffmpeg工程包含的三个exe的使用方法。ffmpeg的官方网站是:http://ffmpeg.org/编译好的可用版本的下载地址: http://ffmpeg.zeranoe.com/builds/根据平台自行下载对应的版本,如图所示..._php ffplay

python数字转百分比%,保留小数点后两位_python百分数保留两位小数-程序员宅基地

文章浏览阅读4.1k次,点赞3次,收藏7次。python数字转百分比%,保留小数点后两位zrs = 215nan = 100nan_zb = "%.2f"%(float(nan/zrs)*100)+"%"print(type(nan_zb))print("男生占总人数的: ",nan_zb)#结果:# <class 'str'># 男生占总人数的: 46.51%_python百分数保留两位小数

tensorflow_2.2_Resnet50实现花的识别_resnet50花卉图像识别-程序员宅基地

文章浏览阅读1.1k次,点赞3次,收藏6次。Resnet50介绍Resnet50与之前在Resnet34中介绍的几乎一样,唯一有区别的就是:残差块由两层卷积变成了三层卷积,网络更深,如下:# 结构快def block(x, filters, strides=1, conv_short=True): if conv_short: short_cut = Conv2D(filters=filters*4, kernel_size=1, strides=strides, padding='valid')(x) _resnet50花卉图像识别

android多线程多文件下载,android 多线程并发下载文件-程序员宅基地

文章浏览阅读332次。Download.javapackage com.wansha;import android.app.Activity;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.util.Log;import android.view.View;import android..._安卓 多文件下载

失真系数 matlab,加载相机矩阵和失真系数-程序员宅基地

文章浏览阅读267次。我正在尝试校准相机,使用AruCo标记进行头部姿势估计 . 我尝试在C中通过OpenCV库进行校准但没有成功,所以我使用MATLAB相机校准工具箱校准了我的相机,我的AruCo标记检测代码在C中,需要相机矩阵和失真系数作为参数 . 我的问题是如何在标记检测功能中加载这些参数 . 我尝试将相机矩阵和失真系数存储在数组中,它显示错误“ argument of type int is incompati..._argument of type "int **" is incompatible with parameter of type "int *

推荐文章

热门文章

相关标签