九. CSS三大特性 1. 层叠性(覆盖性): **相同的选择器给设置相同的样式,**此时一个样式会覆盖另一个冲突的样式、 层叠性就是要解决样式冲突的问题 层叠性原则: 若样式冲突:就近原则,离那个样式结构近,就执行那个样式 样式不冲突,不会层叠 <style> /*两个都是标签选择器同时对元素设置 ...
转载 2021-10-17 23:19:00
75阅读
2评论
1、父元素选择器:$div>span 例:.wrap>$div>span{color:red;} 此时样式会落在带有$的div身上 例2:$ol>li:only-child{list-style:none;} 此时样式会落在只有一个li子元素的ol身上。2、链接地址伪类:分割线//// :any-link(用于所有链接) :local-...
转载 2023-03-02 05:36:29
697阅读
我们知道有CSS1,CSS2,甚至还有由CSS2.1推出的CSS3不是么?这篇文章将快速的解释CSS如今的版本。CSS版本1和版本2都是统一规范的。所有的CSS,无论是选择器,定位,还是颜色等等都被包含在一个厚重的文档中。统一规范的问题在于当想要结束这版规范的时候,每个组件都不得不被结束。随着CSS逐渐变的复杂,新的特性被添加进来,为了宣布CSS版本结束而限制CSS每个部分都停止更新是不明智的。因
转载 2021-01-20 15:11:52
579阅读
2评论
同构成了CSS布局的基础,掌握它们对网页设计至关重要。
HTML部分: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/详情.css"/> </head> <body> ...
转载 2021-10-28 17:49:00
108阅读
2评论
css实现元素四阴影
原创 精选 2023-12-13 18:55:50
1008阅读
1点赞
语法:.class{//你的class box-shadow:4px 6px 5px rgb(126, 123, 123);}
原创 2023-06-06 17:59:31
187阅读
<!DOCTYPE html> <html> <head> <style> p.one { text-shadow: 3px 5px 5px #FF0000; } p.two { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, ...
转载 2021-09-30 17:05:00
1174阅读
2评论
1、盒子阴影 语法box-shadow: h-shadow v-shadow blur spread color inset; box-shadow: x轴偏移量 y轴偏移量 模糊值 阴影大小 阴影颜色 内阴影inset|外阴影(outset默认)h-shadow:阴影的水平偏移量。正数向右偏移,负数向左偏移。 必需 单位: px v-shadow:阴影的垂直偏移量。正数向下偏移,负数向上
原创 2024-04-23 14:42:12
173阅读
在前端开发中,比较常用的有一种样式是阴影,我自己用的有2种写法来实现。 第一种是box-shadow,应该是大家比较熟悉的了,这里不再详述。我主要想分享的是drop-shadow来实现。下面讲一下使用场景,比如有2种效果需要你来实现,如下图: 图一 图二图一是我在做移动端web页面时遇到的需求,是底部的添加按钮需要和底部导航一样有阴影。如果使用box-shaow的话,实现效果可能是这样的: 在添加
转载 2023-05-23 14:07:05
1177阅读
CSS引入方式-行内式通过 style这个标签属性,将css键值对直接写入标签内12css引入方式-内嵌式(嵌入式)使用style标签将css属性名和属性值引入到html页面中,通常style标签放置在head标签中。为什么css样式要放置在head标签中呢,因为代码从上到下执行,如果先加载结构,那么用户看到的就将是干巴巴的内容,而没有通过美化,而先加载样式后加载结构,就相当于孩子出生就是穿着衣服
转载 2021-05-04 21:47:49
431阅读
2评论
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......github:https://github.com/Daotin/Web 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!一、颜色模式颜色模式有两种:RGBArgba(0,0,0,0.5); //黑色,透明度0.
for ie:direction 阴影角度 0°为从下往上 顺时针方向strength 阴影段长度-moz-box-shadow: 2px 2px 10px #909090;-webkit-box-shadow: 2px 2px 10px #909090;box-shadow:2px 2px 10p...
转载 2014-05-19 09:20:00
1425阅读
CSS|文本阴影<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文本阴影</title> <style> h1{ /*文本阴影,参数分别为:水平距离,垂直距离,模糊距离,阴影颜色*/ text-shadow: 5px 5px 2px aqua; } </styl
原创 2022-07-11 16:36:34
152阅读
可以通过。..
原创 2022-10-28 04:57:31
438阅读
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径
.shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.
转载 精选 2013-05-28 03:14:21
611阅读
要实现的效果图:实现的代码:-webkit-box-shadow:0px 3px 3px #c8c8c8 ;-moz-box-shadow:0px 3px 3px #c8c8c8 ;box-shadow:0px 3px 3px #c8c8c8 ;整个页面的代码:<!DOCTYPE html ><html><head> <meta h...
原创 2022-04-24 09:20:49
558阅读
CSS|盒子阴影使用box-shadow可以设置盒子的阴影,它有六个参数,其中前两个是必选的box-shadow: 阴影的水平位置 阴影的垂直位置 模
原创 2022-07-11 16:36:28
2080阅读
要实现的效果图:实现的代码:-webkit-box-shadow:0px 3px 3px #c8c8c8 ;-moz-box-shadow:0px 3px 3px #c8c8c8 ;box-shadow:0px 3px 3px #c8c8c8 ;整个页面的代码:<!DOCTYPE html ><html><head> <meta h...
css
原创 2021-07-28 11:40:49
827阅读
  • 1
  • 2
  • 3
  • 4
  • 5