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

元素整体透明度

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>
相关推荐
struggle20251 小时前
AxonHub 开源程序是一个现代 AI 网关系统,提供统一的 OpenAI、Anthropic 和 AI SDK 兼容 API
css·人工智能·typescript·go·shell·powershell
朝阳394 小时前
CSS【实战】可编辑元素实现 placeholder -- contenteditable=“true“
css
Ares-Wang5 小时前
CSS3》》 transform、transition、translate、animation 区别
前端·css·css3
fox_8 小时前
CSS3:水平垂直居中的 N 种实现方法
css
超能996要躺平8 小时前
用三行 CSS 实现任意多列等分布局:深入掌握 Grid 的 repeat() 与 gap
前端·css
寒月霜华10 小时前
JavaWeb-html、css-网页正文制作
前端·css·html
*濒危物种*10 小时前
HTML标签语法,基本框架
前端·css·html
软件技术NINI10 小时前
html css js网页制作成品——HTML+CSS+js早餐铺网页设计(4页)附源码
javascript·css·html
WebDesign_Mu1 天前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
Bellafu6661 天前
selenium的css定位方式有哪些
css·selenium·tensorflow