【前端学习】D5：CSS提高

最新推荐文章于 2024-04-28 17:03:13 发布
最新推荐文章于 2024-04-28 17:03:13 发布
阅读量886 收藏 1
点赞数
分类专栏： 前端学习 文章标签： css 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47678542/article/details/129430220
版权

文章目录

前言

这篇文章为我跟随pink老师重新系统学习前端时做的一些笔记。

系列文章目录

【HTML5与CSS3篇】
D1：HTML基础：简介+常用标签
D2：CSS入门：简介+基础选择器+字体&文本属性+引入方式
D2：CSS基础：复合选择器+元素显示模式+背景
D3：CSS进阶：层叠&继承&优先级+盒子模型+圆角边框+盒子&文本阴影+浮动
D4：CSS进阶：定位+元素的显示与隐藏
D5：CSS进阶：字体图标+CSS三角+光标样式+vertical-align属性+布局技巧
D5：CSS提高：HTML5&CSS3的新特性
【JavaScript篇】
D1：JavaScript入门：计算机基础+变量+数据类型
D2：JavaScript基础：运算符+运算流程分支控制+命名规范与语法格式
D3：JavaScript进阶

1 HTML5的新特性

HTML5的新增特性主要是针对以前的不足，添加了一些新的标签、表单和表单属性等。这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

1.1 新增语义化标签

以前的布局基本都使用<div>来实现。但<div>对于搜索引擎来说，是没有语义的。

  • <header>：头部标签
  • <nav>：导航标签
  • <article>：内容标签
  • <section>：定义文档某个区域
  • <aside>：侧边栏标签
  • <footer>：尾部标签
    布局
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML5新增语义化标签</title>
    <style>
      header,
      nav {
        height: 120px;
        background-color: pink;
        border-radius: 15px;
        width: 800px;
        margin: 15px auto;
      }
      section {
        width: 500px;
        height: 300px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <header>头部标签</header>
    <nav>导航栏标签</nav>
    <section>某个区域</section>
  </body>
</html>

效果图

  • 这种语义化标准主要是针对搜索引擎的。
  • 这些新标签在页面中可以多次使用。
  • 在IE9中，需要把这些元素转换为块级元素。
  • 移动端开发常用这些标签。

1.2 新增多媒体标签

新增的多媒体标签主要包含以下两个：

  1. 音频：<audio>
  2. 视频：<video>

使用以上标签可以很方便地在页面中嵌入音频和视频，而不再使用flash和其他浏览器插件。

1.2.1 视频标签<video>

当前<video>元素支持三种视频格式，尽量使用mp4格式：

浏览器MP4WebMOgg
IE√
Chrome√√√
Firefox√，从Firefox 21版本开始，Linux系统从Firefox 30开始√√
Safari√
Opera√，从Opera 25版本开始√√
<video src="文件地址" controls="controls"></video>

考虑兼容性时的写法：

<video src="文件地址" controls="controls" width="300">
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.ogg" type="video/ogg">
	您的浏览器暂不支持<video>标签播放视频
</video>

<video>标签的常见属性：

属性值描述
autoplayautoplay视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controlscontrols向用户显示播放控件
widthpixels（像素）设置播放器宽度
heightpixels（像素）设置播放器高度
looploop播放完是否继续播放该视频，循环播放
preloadauto（预先加载视频），none（不预先加载视频）规定是否预加载视频（如果有了autoplay，就忽略该属性）
srcurl视频url地址
posterimgUrl加载等待的画面图片
mutedmuted静音播放
<video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>

1.2.2 音频标签<audio>

HTML5在不使用插件的情况下，也可以原生支持音频格式文件的播放。
当前<audio>元素支持三种音频格式，尽量使用mp3格式：

浏览器MP3WavOgg
IE√
Chrome√√√
Firefox√√√
Safari√√
Opera√√√
<audio src="文件地址" controls="controls"></audio>

考虑兼容性时的写法：

<audio src="文件地址" controls="controls">
	<source src="music.mp3" type="audio/mpeg">
	<source src="music.ogg" type="audio/ogg">
	您的浏览器暂不支持<audio>标签播放音频
</audio>

<audio>标签的常见属性：

属性值描述
autoplayautoplay音频就绪自动播放（谷歌浏览器禁止音频自动播放，后期可以通过JavaScript解决）
controlscontrols向用户显示播放控件
looploop播放完是否继续播放该音频，循环播放
srcurl音频url地址
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>

1.3 新增input表单

属性值说明
type=“email”限制用户输入必须为Email类型
type=“url”限制用户输入必须为URL类型
type=“date”限制用户输入必须为日期类型
type=“time”限制用户输入必须为时间类型
type=“month”限制用户输入必须为月类型
type=“week”限制用户输入必须为周类型
type=“number”限制用户输入必须为数字类型
type=“tel”手机号码
type=“search”搜索框
type=“color”生成一个颜色选择表单
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <!-- 验证时必须添加form表单域 -->
    <form action="">
      <ul>
        <li>邮箱: <input type="email" /></li>
        <li>网址: <input type="url" /></li>
        <li>日期: <input type="date" /></li>
        <li>时间: <input type="time" /></li>
        <li>数量: <input type="number" /></li>
        <li>手机号码: <input type="tel" /></li>
        <li>搜索: <input type="search" /></li>
        <li>颜色: <input type="color" /></li>
        <!-- 点击提交按钮就可以验证表单了 -->
        <li><input type="submit" value="提交" /></li>
      </ul>
    </form>
  </body>
</html>

效果图

1.4 新增表单属性

属性值说明
requiredrequired表单拥有该属性，表示其他内容不能为空，必填
placeholder提示文本表单的提示信息，存在默认值将不显示
autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到制定表单
autocompleteoff / on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开。需要放在表单内，同时加上name属性，同时成功提交
multiplemultiple可以多选文件提交

修改提示文本的颜色：

input::placeholder {
	color: blue;
}

2 CSS3的新特性

2.1 CSS3的现状

  • 新增的CSS3特性有兼容性问题，IE9+才支持
  • 移动端支持优于PC端
  • CSS3正在不断改进中，应用相对广泛

2.2 新增属性选择器

属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类选择器或id选择器。

选择符简介
E[att]选择具有att属性的E元素
E[att=“val”]选择具有att属性且属性值等于val的E元素
E[att^=“val”]匹配具有att属性且值以val开头的E元素
E[att$=“val”]匹配具有att属性且值以val结尾的E元素
E[att*=“val”]匹配具有att属性且值中含有val的E元素
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS3新增属性选择器</title>
    <style>
      /* 必须是input标签，同时具有value属性 */
      /* input[value] {
            color:pink;
        } */
      /* 必须是input标签，同时type属性的属性值为text */
      input[type='text'] {
        color: pink;
      }
      /* 必须是div标签，同时class属性的属性值以icon开头 */
      div[class^='icon'] {
        color: red;
      }
      /* 必须是section标签，同时class属性的属性值以data结尾 */
      section[class$='data'] {
        color: blue;
      }
      /* 注意权重 */
      div.icon1 {
        color: skyblue;
      }
    </style>
  </head>
  <body>
    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->
    <!-- 2. 属性选择器还可以选择属性=值的某些元素 -->
    <input type="text" name="" id="" />
    <input type="password" name="" id="" />
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>测试</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">测试文本1</section>
    <section class="icon2-data">测试文本2</section>
    <section class="icon3-ico">测试文本3</section>
  </body>
</html>

效果
类选择器、属性选择器、伪类选择器，权重都为10。

2.3 新增结构伪类选择器

结构为类选择器主要根据文档结构来选择元素，常用于根据父级选择里面的子元素。

选择符简介
E:first-child匹配父元素中的第一个子元素E
E:last-child匹配父元素中的最后一个子元素E
E:nth-child(n)匹配父元素中的第n个子元素E
E:first-of-type指定类型E的第一个
E:last-of-type指定类型E的最后一个
E:nth-of-type(n)指定类型E的第n个

nth-child(n)选择以某个父元素的一个或多个特定的子元素

  • n可以是数字，关键字和公式
  • n如果是数字，就是选择第n个元素。注意，n是从1开始的，而不是从0开始的。
  • n可以是关键字：even偶数，odd奇数
  • n可以是公式，常见的公示如下。注意，当n为公式，则从0开始计算，但是第0个元素和超出元素个数的元素都会被忽略。
公式取值
2n偶数
2n+1奇数
5n5，10，15
n+5从第5个开始（包含第5个）到最后
-n+5前5个（包含第5个）
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS3新增结构伪类选择器-nth-child</title>
    <style>
      /* 1. li元素序号从1开始，选择序号为偶数even的li元素 */
      ul li:nth-child(even) {
        background-color: #ccc;
      }
      /* 2. li元素序号从1开始，选择序号为奇数odd的li元素 */
      ul li:nth-child(odd) {
        background-color: plum;
      }
      /* 3. 选择所有li元素：nth-child(n)。此时元素序号n从0开始，每次加1，往后面计算。这里面必须是n，不能是其他字母 */
      /* ol li:nth-child(n) {
            background-color: pink;
        } */
      /* 4. li元素序号从1开始，选择序号为2n的li元素，等价于选择序号为偶数even的li元素*/
      /* ol li:nth-child(2n) {
            background-color: pink;
        }
        ol li:nth-child(2n+1) {
            background-color: skyblue;
        } */
      /* ol li:nth-child(n+3) {
            background-color: pink;
        } */
      ol li:nth-child(-n+3) {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>第1个</li>
      <li>第2个</li>
      <li>第3个</li>
      <li>第4个</li>
      <li>第5个</li>
      <li>第6个</li>
      <li>第7个</li>
      <li>第8个</li>
    </ul>
    <ol>
      <li>第1个</li>
      <li>第2个</li>
      <li>第3个</li>
      <li>第4个</li>
      <li>第5个</li>
      <li>第6个</li>
      <li>第7个</li>
      <li>第8个</li>
    </ol>
  </body>
</html>

效果图
E:nth-child(n)与E:nth-of-type(n)的区别：

  1. E:nth-child(n)对父元素里面所有子元素排序选择（序号是固定的）：先找到第n个子元素，再看是否和E匹配
  2. E:nth-of-type对父元素里面指定子元素排序选择：先匹配E，再根据E找第n个子元素
  3. 无序列表，用E:nth-child更多
  4. 类选择器、属性选择器、伪类选择器的权重都为10
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS3新增选择器nth-type-of</title>
    <style>
      ul li:first-of-type {
        background-color: pink;
      }
      ul li:last-of-type {
        background-color: pink;
      }
      /* 使用方式和nth-child(n)相同 */
      ul li:nth-of-type(even) {
        background-color: skyblue;
      }
      /* nth-child会把所有的盒子都排列序号。执行时先读取:nth-child(1)，跳到html中定位第一个子元素，再回CSS中读取div。
      当条件不满足时，即section的第一个子元素是p而不是div时，选择元素失败 */
      section div:nth-child(1) {
        background-color: red;
      }
      /* nth-of-type会把指定元素的盒子排列序号。执行时先读取指定的元素div，跳到html中定位div标签，再回CSS中读取:nth-of-type(1)。
      避免了元素选择失败的问题。 */
      section div:nth-of-type(1) {
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <ul>
      <li>我是第1个孩子</li>
      <li>我是第2个孩子</li>
      <li>我是第3个孩子</li>
      <li>我是第4个孩子</li>
      <li>我是第5个孩子</li>
      <li>我是第6个孩子</li>
      <li>我是第7个孩子</li>
      <li>我是第8个孩子</li>
    </ul>
    <!-- 区别 -->
    <section>
      <p>p标签</p>
      <div>div标签1</div>
      <div>div标签2</div>
    </section>
  </body>
</html>

效果图

2.4 新增伪元素选择器（*）

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

选择符简介
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容
  • before和after都创建了一个新元素，但是属于行内元素，不能直接设置大小。新创建的这个元素在文档树中不存在，所以称之为伪元素。
  • before和after必须有content属性。before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。
  • 伪元素选择器和标签选择的权重都为1（div::before{}的权重是2）。

使用场景：

  1. 伪元素字体图标
    @font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?1lv3na');
  src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
       url('fonts/icomoon.ttf?1lv3na') format('truetype'),
       url('fonts/icomoon.woff?1lv3na') format('woff'),
       url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
div {
  position: relative;
  width: 200px;
  height: 35px;
  border: 1px solid red;
}
div::after {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: 'icomoon';
  /* content: ''; */
  content: '\e91e';
  color: red;
  font-size: 18px;
}

效果图

  1. 伪元素显示隐藏视频封面遮罩
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</title>
    <style>
      .tudou {
        position: relative;
        width: 444px;
        height: 320px;
        background-color: pink;
        margin: 30px auto;
      }
      .tudou img {
        width: 100%;
        height: 100%;
      }
      .tudou::before {
        content: '';
        /* 隐藏遮罩层 */
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4) url(images/arr.png) no-repeat center;
      }
      /* 当我们鼠标经过了tudou这个盒子，就让里面before遮罩层显示出来 */
      .tudou:hover::before {
        /* 此处不是转换为块元素，而是显示元素 */
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="tudou">
      <img src="images/tudou.jpg" alt="" />
    </div>
    <div class="tudou">
      <img src="images/tudou.jpg" alt="" />
    </div>
    <div class="tudou">
      <img src="images/tudou.jpg" alt="" />
    </div>
    <div class="tudou">
      <img src="images/tudou.jpg" alt="" />
    </div>
  </body>
</html>

  1. 伪元素清除浮动
    清除浮动的方法：

    • 额外标签法（隔墙法），是W3C推荐的做法（【前端学习】D3：CSS进阶）
    • 父级添加overflow属性
    • 父级添加after伪元素
    • 父级添加双伪元素

    后两种伪元素清除浮动算是额外标签法的升级和优化。

    .clearfix:after {
	content: "";	/* 伪元素必须写的属性 */
	display: block;	/* 插入的元素必须是块级 */
	height: 0;	/* 不要看见这个元素 */
	clear: both;	/* 清除浮动的核心代码 */
	visibility: hidden;	/* 不要看见这个元素 */
}

2.5 盒子模型

CSS3中可以通过box-sizing来指定盒模型，有两个值，即可指定为content-box或border-box，这样计算盒子大小的方式就发生了改变。

  1. box-sizing: content-box;：盒子大小为width+padding+border（以前默认的）
  2. box-sizing: border-box;：盒子大小为width，那么padding和border就不会撑大盒子了（前提是padding和border之和不会超过width）

2.6 其它特性（了解）

2.6.1 滤镜filter：图片变模糊

filter属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数();

例如：

img {
	/* blur模糊处理，数值越大，图片越模糊 */
	filter: blur(15px);
}
img:hover {
	/* 鼠标悬停时获得清晰图片 */
	filter: blur(0);
}

2.6.2 calc函数：计算盒子宽度

calc()实现在声明CSS属性值时执行一些计算。括号里面可以使用+，-，*，/来进行计算。

width: calc(100% - 80px);

2.6.2 新增属性过渡（*）

过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，在元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是一个从状态渐渐地过渡到领一个状态，可以让页面更好看。虽然低版本浏览器（IE9以下版本）不支持，但不影响页面布局。现在常和:hover一起搭配使用。

transition: 要过渡的属性 花费时间 运动曲线 何时开始;
  1. 属性：想要变化的CSS属性，例如宽度、高度、背景颜色、内外边距等。如果想要所有属性都变化过度，写all。
  2. 花费时间：单位是秒（必须写单位），如0.5s。
  3. 运动曲线：默认是ease（可以省略）。
    运动曲线
  4. 何时开始：单位是秒（必须写单位），可以设置延迟出发时间。默认是0s（可以省略）。
div {
	width: 200px;
	height: 100px;
	background-color: pink;
	/* transition: 变化的属性 花费时间 运动曲线 何时开始; */
	/* 如果要写多个属性，利用逗号进行分割 */
    /* transition: width .5s ease 0s, height .5s ease 1s; */
	transition: all 0.5s;
}
div:hover {
	width: 400px;
	height: 200px;
	background-color: skyblue;
}

案例：进度条

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS3过渡练习-进度条</title>
    <style>
      .bar {
        width: 150px;
        height: 15px;
        border: 1px solid red;
        border-radius: 7px;
        padding: 1px;
      }
      .bar_in {
        width: 50%;
        height: 100%;
        background-color: red;
        /* 给发生变化的元素加过渡 */
        transition: all 0.7s;
      }
      .bar:hover .bar_in {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="bar">
      <div class="bar_in"></div>
    </div>
  </body>
</html>

效果图
鼠标悬停时：
效果图
练习：动态切换的小米官网的logo
HTML5+CSS3 Pink老师课后作业——小米logo过渡切换的实现
小白初上手HTML+CSS 仿写小米官网logo动画

3 广义的H5（了解）

狭义的HTML5与CSS3：HTML5结构标签本身与CSS3的相关样式。
广义的HTML5：HTML5本身+CSS3+JavaScript。这个集合有时称为HTML5和朋友，通常缩写为HTML5。虽然HTML5的一些特性仍然不被某些浏览器支持，但它是一种发展趋势。
HTML5 MDN介绍

甜鲸鱼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
深度学习d5：卷积神经网络基础；leNet；卷积神经网络进阶
01-07
训练模型的时候，通常我们先对卷积核随机初始化，然后不断迭代卷积核和偏差，即可通过数据学习核数组。每次迭代中，将输出与真实值进行比较，然后计算梯度进行更新。 可用来进行图像边缘检测。 互相关运算和卷积运算...
前端：CSS基础知识
lllwky的博客
08-07 2008
CSS基础 一：什么是CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 注：查找CSS样式的网站： CSS样式菜鸟教程 二：选择器 1：idea新建CSS目录样式
前端例程20220920：纯CSS图片自动轮播效果
Naisu的各种笔记
09-20 1014
纯CSS图片自动轮播效果
前端经典案例：CSS水平、垂直居中布局
Flatroad
05-28 440
1、水平居中 1.1、行内元素水平居中 这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。 .box { text-align: center; background-color: #f6e5dd; } <div class="box"> 水平居中 </div> 1.2、块级元素水平居中 1.2.1、固定宽度块级元素水平居中 只需给需要居中的块级元素加margin:0 a
前端：HTML+CSS实现相册管理网站原型
这也是计划的一部分的博客
10-15 457
利用HTML+CSS实现的相册管理网站原型
前端学习笔记：使用CSS+JS实现半圆环进度条
weixin_33860147的博客
03-21 1687
前言 我所在的公司是一家电商公司，用户最常使用的场景就是领取优惠券。最近，我们公司决定修改“领券中心”的呈现效果，于是优惠券有了一个新的展现方式。 那么，要怎么去实现这样的样式呢？查了一下淘宝，PC端做了限制，无法直接查看手机端的优惠券效果；京东倒是上看到优惠券的样式，可都是直的，没什么难度。最后还是在苏宁上找到了类似的样式，发现是通过SVG来实现的。 此前我没有接触过SVG，这个项目也急着上...
W6D5-专案：CSS花絮，RSpec作业，TDD专案
02-21
W6D5-专案：CSS花絮，RSpec作业，TDD专案
W4D5:W4D5功课
03-20
W4D5:W4D5功课
W5D5:功课
03-27
W5D5:功课
W3D5:课堂项目
03-13
W3D5:课堂项目
CSS_sass模块化、scss模块化
小歪博客
04-25 339
CSS_sass模块化、scss模块化
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1218
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
js动态设置css主题(Style-setProperty)
zarek_jiamu的博客
04-27 331
定义的参考色，在开发的过程中希望后端人员能遵循// 用于按钮点击颜色num
CSS之显示覆盖内容（z-index）
qq_60624992的博客
04-27 733
我们有的时候，希望下方的内容能够显示到上方，达到类似于多个图层的效果，此时我们可以利用z-index这个属性。z-index属性值是用来设置元素的堆叠顺序(元素层级)。
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。
m0_68335484的博客
04-23 1487
2分钟自己写小游戏：使用js和css，快捷编写剪刀石头布游戏源代码、扫雷源代码、五子棋。新手老手毕业论文都能用。使用的都是简单的js和css代码，实现了这三款小游戏，复制就能用。一看就能懂。这里分享一下。下次继续。
css中新型的边框设置属性border-inline
qwguo
04-24 527
是 CSS 逻辑属性的重要组成部分，用于在书写模式无关的情况下设置元素的内联方向边框。掌握并运用这些逻辑属性有助于创建出更灵活、适应性更强的网页布局和样式，特别是在响应式设计和多语言支持场景中。
css设置子元素在父元素中水平垂直居中
qq_39454432的博客
04-23 515
css设置子元素在父元素中水平垂直居中的方法
Javascript Summery3 TOUCH SCREEN COMMON CSS
张人杰的博客
04-24 218
margin:0;padding:0;*{*{
CSS高级选择器
最新发布
bengbeng2345的博客
04-28 686
属性选择器、关系选择器、结构伪类选择器、链接伪类选择器、伪元素选择器
05-27 18:09:47:036 VolumeStreamState.muteInternally(stream:STREAM_MUSIC, muted) 05-27 18:09:47:038 onSetBtActiveDevice dev:0x80 volIdx:500 05-27 18:09:47:234 VolumeStreamState.muteInternally(stream:STREAM_MUSIC, unmuted) 05-27 18:09:47:860 setDeviceVolumeBehavior: dev:bt_a2dp addr:52:31:B5:D5:69:95 behavior:DEVICE_VOLUME_BEHAVIOR_ABSOLUTE pack:com.android.bluetooth 05-27 18:09:47:860 avrcpSupportsAbsoluteVolume addr=52:31:B5:D5:69:95 support=true
06-06
这是一个 Android 系统的日志信息，包含了多个条目，每个条目对应着一个特定的动作或事件。根据这些日志信息，我们...- 第五条日志信息表示蓝牙设备支持绝对音量控制，并将其应用到地址为 52:31:B5:D5:69:95 的设备上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值