元素整体透明度、边框合并、选择器扩展

元素整体透明度

opacity 可以让元素整体(包括内容)一起变透明,在 0 - 1 之间取值,0 表示完全透明,1 表示完全不透明。

HTML 复制代码
    <style>
      .one {
        width: 120px;
        height: 120px;
        background-color: rgb(17, 191, 249);
      }
      .two {
        opacity: 0.3;
        width: 60px;
        height: 60px;
        background-color: rgb(51, 242, 30);
      }
    </style>

  <body>
    <div class="one">
      <div class="two">元素透明度</div>
    </div>
  </body>

边框合并

border-collapse:collapse 可以让相邻的表格的边框进行合并,得到细线边框效果

HTML 复制代码
    <style>
      table {
        border-collapse: collapse;
        border: 1px solid #000;
      }
      tr,
      td {
        border: 1px solid #000;
      }
    </style>

  <body>
    <table>
      <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
      </tr>
    </table>
  </body>

用 CSS 画三角形技巧

在网页中展示出的小三角,除了可以使用图片外,还可以使用代码实现,其原理就是利用盒子边框完成。

实现步骤:先设置一个盒子,设置四周不同颜色的边框;然后设置盒子的宽高为 0 ,仅保留边框;最后会得到四个三角形:

选择其中一个后,将其他的三角形边框颜色设置成透明,就会得到一个小三角形:

通过调整不同边框的宽度,可以调整三角形的形状

HTML 复制代码
    <style>
      div {
        width: 0;
        height: 0;
        border-left: 50px solid lightgreen;
        border-top: 20px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 30px solid transparent;
      }
    </style>

  <body>
    <div></div>
  </body>

选择器扩展

(1)链接伪类选择器

链接 伪类选择器常用于选中超链接的不同状态,它有四种状态:

  • 未访问( link ) :选中超链接未访问过的状态
  • 访问之后( visited ):选中超链接访问过之后的状态
  • 鼠标悬停( hover ):选中鼠标悬停的状态
  • 鼠标按下( active ):选中鼠标按下的状态

上面四种伪类链接选择器可以分开使用,也可以一起使用,如果要同时实现以上四种伪类状态的显示效果,需要按照 LVHA 顺序书写,记不住的话,可以这样来记 "买了一个 LV 包包,HA 开心"

其中 hover 伪类选择器使用更频繁,常用于选择各类元素的悬停状态,具体用法及使用示例在这篇文章里有写到 六、复杂选择器 - 掘金 (juejin.cn)

(2)焦点伪类选择器

焦点 伪类选择器用于选中元素获取焦点时的状态,常用于 表单控件

表单控件获取焦点时默认会显示外部轮廓线,选择器语法:

示例:把光标移到 input 输入框里面,点击鼠标,就会 获得焦点 ,然后输入框变成蓝色,同时显示外部轮廓线;把光标从输入框移开,点击网页任意地方,输入框就会 失去焦点 ,恢复原始形态:

HTML 复制代码
    <style>
      input:focus {
        background-color: lightblue;
      }
    </style>

  <body>
    <input type="text" />
  </body>

(3)属性选择器

通过元素上的 HTML 属性来选择元素,通常用于选择 input 标签

属性选择器常用语法:

HTML 复制代码
    <style>
      input[value] {
        background-color: lightblue;
      }
      input[type='text'] {
        background-color: lightgreen;
      }
    </style>

  <body>
    <input type="text" />
    <br>
    <input type="password" value="psd" />
  </body>
相关推荐
luckyPian40 分钟前
前端+AI:CSS3(二)
前端·css·css3
muyouking111 小时前
Tailwind CSS 小白快速入门速查手册
前端·css·css3
fruge14 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
znhy@12316 小时前
CSS易忘属性
前端·css
软件技术NINI16 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
小肚肚肚肚肚哦18 小时前
CSS 伪类函数 :where 简介
前端·css
小肚肚肚肚肚哦19 小时前
伪元素与普通元素的层级关系问题浅析
前端·css
~无忧花开~20 小时前
CSS学习笔记(二):CSS动画核心属性全解析
开发语言·前端·css·笔记·学习·css3·动画
小九今天不码代码20 小时前
深入理解 CSS 表格布局:table-layout 的秘密与实战详解(附费用报销单案例)
css·前端开发·表格布局·web设计·table-layout·页面优化·样式布局
trsoliu1 天前
Tailwind CSS 类名管理工具实战指南
前端·css