likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 39

元素整体透明度

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

    <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 可以让相邻的表格的边框进行合并，得到细线边框效果

    <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 ，仅保留边框；最后会得到四个三角形：

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

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

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

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

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

    <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 开心”

（2）焦点伪类选择器

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

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

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

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

    <style>
      input:focus {
        background-color: lightblue;
      }
    </style>

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

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

（3）属性选择器

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

属性选择器常用语法：

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

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

  <body>
    <input type="text" />
    <br>
    <input type="password" value="psd" />
  </body>

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

转载自:https://juejin.cn/post/7358722746879852583
评论
请登录