CSS3 选择器 文字阴影

最新推荐文章于 2022-05-14 16:15:00 发布
最新推荐文章于 2022-05-14 16:15:00 发布
阅读量341 收藏 8
点赞数
CC 4.0 BY-SA版权
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xglx_1994/article/details/51320203
本文介绍了CSS3中选择器的应用，包括属性选择器和结构性伪类，特别关注了文字阴影和描边效果的实现，提供了一个新浪头部导航的示例。此外，还探讨了新增的文本功能和如何自定义文字，建议使用在线工具http://www.fontsquirrel.com/fontface/generator进行字体格式转换以确保兼容性。

Css3 选择器--属性选择器(1)

E[attr]只使用属性名，但没有确定任何属性值
E[attr="value"]指定属性名，并指定了该属性的属性值
E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
E[attr $="value"]指定了属性名，并且有属性值，而且属性值是 以value结束的
E[attr *="value"]指定了属性名，并且有属性值，而且属值中 包含了value
E[attr |="value"]指定了属性名， 并且属性值是value或者以“value-”开头的值（比如说zh-cn）
example：百度百科 


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px; line-height:30px; font-size:12px;border:1px solid #000;}
p a{background:url(img/w.gif) no-repeat 3px center;padding-left:20px; display:block;}
p a[href*=text]{ background-image:url(img/text.gif);}
p a[href*=pdf]{ background-image:url(img/swf.gif);}
p a[href*=exl]{ background-image:url(img/x.gif);}
</style>
</head>
<body>
<p>
	<a href="http://www.miaov.com/doc/javascript.html">妙味课堂</a>
</p>
<p>
	<a href="http://www.miaov.com/text/javascript.html">妙味课堂</a>
</p>
<p>
	<a href="http://www.miaov.com/pdf/javascript.html">妙味课堂</a>
</p>
<p>
	<a href="http://www.miaov.com/exl/javascript.html">妙味课堂</a>
</p>
</body>
</html>

Css3 选择器–结构性伪类

E:nth-child(n)  表示 E 父元素中的第 n 个字节点 从1开始计数 （eq从0开始）
•p:nth-child(odd){background:red}/*匹配奇数行*/
•p:nth-child(even){background:red}/*匹配偶数行*/
•p:nth-child(2n){background:red}
E:nth-last-child(n) 表示 E 父元素中的第 n 个字节点，从后向前计算
E:nth-of-type(n)  表示 E 父元素中的第 n 个字节点，且类型为 E
E:nth-last-of-type(n) 表示 E 父元素中的第 n 个字节点，且类型为 E, 从后向前计算
E:empty 表示 E 元素中没有子节点。注意：子节点包含文本节点

E:first-child 表示 E 元素中的第一个子节点
E:last-child 表示 E 元素中的最后一个子节点
E:first-of-type 表示 E 父元素中的第一个子节点且节点类型是 E 的
E:last-of-type 表示 E 父元素中的最后一个子节点且节点类型是 E 的
E:only-child 表示 E 元素中只有一个子节点。注意：子节点不包含文本节点
E:only-of-type 表示 E 的父元素中只有一个子节点，且这个唯一的子节点的类型必须是 E 。注意：子节点不包含文本节点

example：新浪头部导航

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.list{margin:0;padding:0; list-style:none;}
.list li{width:150px;border-right:1px solid #000;float:left;}
.list li:last-of-type{border:none;}
.list a{float:left;width:40px;margin:0 5px; font:12px/30px "宋体"; text-align:center;}
.list li a:nth-of-type(3n+1){ font-weight:bold;}
.list li:nth-child(3) a:nth-child(2){ color:red;}
</style>
</head>
<body>
<ul class="list">
	<li>
    	<a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
    </li>
    <li>
    	<a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
    </li>
    <li>
    	<a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
    </li>
    <li>
    	<a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
    </li>
    <li>
    	<a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
    </li>
    <li>
    	<a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
    </li>
    <li>
    	<a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
        <a href="#">妙味</a>
    </li>
</ul>
</body>
</html>

Css3 选择器--伪类

E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E ::selection表示E元素在用户选中文字时
E ::before 生成内容在E元素前 （ 结合content使用）
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配
E~F表示E元素毗邻的F元素 （同级元素兄弟节点）
Content 属性

文字阴影

• text-shadow：x y blur color, …
•参数
–x  横向偏移
–y  纵向偏移
–blur  模糊距离
color  阴影颜色


文字描边

-webkit-text-stroke:宽度 颜色

新增文本功能

Direction  定义文字排列方式(全兼容)
•Rtl从右向左排列
•Ltr从右向左排列
•注意要配合unicode-bidi一块使用
Text-overflow 定义省略文本的处理方式
•clip  无省略号
•Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)


自定义文字

格式：

<span style="color:#CC0000;">@font-face {
    font-family: ‘miaov';
    src: url('111-webfont.eot');
    src: url('111-webfont.eot?#iefix') format('embedded-opentype'),
         url('111-webfont.woff') format('woff'),
         url('111-webfont.ttf') format('truetype'),
         url('111-webfont.svg#untitledregular') format('svg');
    font-weight: normal;
    font-style: normal;

}</span>


}



转换字体格式生成兼容代码http://www.fontsquirrel.com/fontface/generator



小葫芦丶
关注
css里阴影效果,css实现阴影效果(box-shadow)
weixin_35873811的博客
08-03 1693
box-shadow 使用方法设置块阴影语法：box-shadow：||取值：?? ||：阴影水平偏移值(可取正负值)；阴影垂直偏移值(可取正负值)；阴影模糊值；阴影颜色说明：引擎类型GeckoWebkitPrestoBox-shadow-moz-box-shadow-webkit-border-shadow在IE中，可以使用filter:shadow来实现阴影效果, 同一个fi...
CSS中如何实现文字阴影效果TextShadow
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-05 3123
默认情况下，文本是没有阴影的，因此这个属性允许我们自定义文本的外观，增强文本的表现力。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。属性的基本介绍及其在实际开发中的应用案例，希望本文能帮助大家更好地理解和运用这一特性，创造出更多精彩的网页设计。这里定义了两个阴影层，第一个阴影颜色较淡，第二个阴影颜色更深一些，并且模糊半径更大，营造出更丰富的层次感。在此示例中，没有设置水平和垂直偏移量，使阴影围绕文本均匀分布，形成发光的效果。
巧妙使用CSS阴影属性的案例
weixin_45249263的博客
03-30 418
本文主要通过CSS的box-shadow属性 和 :hover 鼠标悬停 来实现一些好玩且有趣的效果
CSS 阴影效果
热门推荐
Dominic_W的博客
05-14 3万+
CSS中，通过text-shadow、box-shadow两个属性分别为文本和元素添加阴影效果。 CSS语法 box-shadow: h-shadow v-shadow blur spread color inset; 向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 h-shadow: 必需。水平阴影的位置，可以为负值 v-shadow:必需。垂直阴影的位置，可以为负值 blur:可选，阴影模糊的
DIV CSS3 box-shadow对象盒子阴影和图片阴影
cxxbzy的博客
10-22 775
box-shadow 属性用于向盒子添加一个或多个阴影效果。 offset-x：阴影的水平偏移量。正数向右偏移，负数向左偏移。 offset-y：阴影的垂直偏移量。正数向下偏移，负数向上偏移。 blur：阴影模糊度，不能取负数。 spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。 inset：表示添加内阴影，默认为外阴影。 ...
CSS3选择器+阴影+渐变
眾K的博客
08-30 431
CSS31.前缀兼容2. CSS3选择器2.1. 关系选择器2.2. 属性选择器2.3. 伪类选择器2.3.1. child系列（重点）![在这里插入图片描述](https://img-blog.csdnimg.cn/20190830001009130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text...
CSS3 text shadow字体阴影效果
12-13
今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法。希望能对大家有所帮助吧。 一、text-shadow语法 1、语法： 对象选择器 {text-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色} 注：text-shadow...
CSS 文字加阴影变3D效果演示
12-03
下面我们将详细讨论如何利用CSS实现这种3D文字阴影效果。 首先，让我们分析一下提供的CSS代码： ```css .sample { font-style: italic; font-family: arial black; font-size: 40px; font-weight: bold; ...
CSS3文字变形3D阴影效果.zip
07-04
此外，CSS3还引入了伪元素（如`:before`和`:after`）和`::first-letter`等选择器，它们可以帮助我们更精细地控制文字的样式。例如，可以使用伪元素创建额外的3D表面或阴影，或者针对首字母进行特殊处理。 在实际...
纯css3霓虹灯文字发光闪烁特效
07-24
1. **伪类选择器**：CSS3引入了许多新的伪类选择器，如`:hover`、`:active`和`:focus`，它们使得动态效果的实现更为简便。在这个特效中，我们可以利用`:hover`来触发文字的发光效果。 2. **文本阴影（text-shadow）...
css怎么实现鼠标移动到div块时自动加阴影效果？
tenggeer0789的博客
04-23 1万+
我们在浏览各大网站时，点击其中的图片可能会出现放大或者旋转等等的特效。这种效果的确能让人眼前一亮，也就可能带来用户点击的流量。当然强大的css功能不仅仅只有这样特效。本篇文章就给大家介绍一种更加酷炫的特效即当鼠标移入div块时产生的css阴影效果，这样就能立即产生立体感。 css阴影效果具体代码示例如下： <style> .shadow{ flo...
CSS应用：阴影和轮廓
宁静致远
05-11 7376
.t_table { border: 2px solid #ddd; border-radius: 6px; width: 100%; border-spacing: 0px; } .t_table td, .t_table th { border: 1px solid #ddd; padding: 6px 12px 6px 12px;
项目总结(css3中的阴影效果)
时清云的博客
08-20 2万+
以前用的很少，没有仔细去了解过这一块，所以对于阴影和动画只是实现一些简单的需求。所以趁这次项目需求结合实践就去好好总结一下这一块。
box-shadow
weixin_30550271的博客
03-27 160
学习地址 http://blog.youkuaiyun.com/freshlover/article/details/7610269 阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影； X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边； Y-offset:阴影垂直偏移量，其值...
用 CSS 设计漂亮的阴影，css阴影和原理，所有知识点多图动画演示
geek word
12-02 9372
以我的拙见，最好的网站和 Web 应用程序对它们具有切实的“真实”品质。实现这种质量涉及很多因素，但阴影是一个关键因素。 但是，当我环顾网络时，很明显大多数阴影并不像它们应有的那样丰富。网络被模糊的灰色框覆盖，看起来并不像阴影。 在本教程中，我们将学习如何将典型的框阴影转换为美丽的、栩栩如生的阴影： 目标受众 本教程适用于有一些 CSS 基础知识的开发人员。 为什么要使用阴影？ 我保证，我们很快就会接触到有趣的 CSS 技巧。但首先，我想退后一步，谈谈为什么CSS 中存在阴影，以及我们如何使用它们来达到最大
CSS3的选择器
Tsite2007的博客
02-27 427
CSS选择器复习 通用选择器：* 选择到所有的元素  选择子元素：> 选择到元素的直接后代(第一级子元素)  相邻兄弟选择器：+ 选择到紧随目标元素后的第一个元素  普通兄弟选择器：~ 选择到紧随其后的所有兄弟元素  伪元素选择器：  ::first-line 匹配文本块的首行  ::first-letter 选择文本块的首字母  伪类选择器：  :before, :
CSS3文字与字体相关样式
hualala_32的博客
02-14 766
给文字添加阴影 使用服务器端字体 修改文字种类而保持字体尺寸不变 给文字添加阴影text-shadow: length(阴影距离文字横向方向距离) length(阴影距离文字纵向方向距离) length(模糊度越大越模糊) color(背景模糊的颜色)第一个length正方向向右 第二个length正方向向下可添加多个阴影，直接加“，”<html> <head lang="en"> <met
css3选择器&文字与字体相关样式
LikeStudyBoy的博客
12-27 2243
目录 一、css3的概念、优势及应用 二、渐进增强和优雅降级的简介 三、css3部分新增选择器的语法及应用场景 四、css3层级选择器的语法及应用场景 五、css3新增关于文本属性的语法及应用场景一、css3的概念、优势及应用1.1 css3的概念 css3即层叠样式表（cascading stylesheet） 1.2 css3的优势 css3是css技术的升级版本，cs
css3 常用选择器以及文本样式
beautyg0515的博客
07-31 487
常用到的选择器 1.类选择器 2.id选择器 3.后代选择器 用空格隔开，可选中全部后代 4 子代选择器 用>隔开 选中直接子代 5 普遍选择器 * 6 多选择器 用，隔开 7 伪元素选择器 以::开头用在选择器后 常用的文本样式 1.color 字体颜色 2.font-weight字体粗细 3.font-family字体样式 4.font-style打开或者关闭文字斜体 5.text-de...
IE下模拟CSS3 text-shadow的文字阴影替代方案
IE浏览器对CSS3 text-shadow的不支持促使开发者寻找创新方式来模拟这种效果，而glow滤镜作为其中一种可能的选择，尽管有其局限，但对于某些场景仍能提供一定的视觉冲击力。随着浏览器技术的进步，未来可能有更多的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值