18 CSS三角用户界面样式

CSS三角

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。
一张图，你就知道 CSS 三角是怎么来的了, 做法如下：

div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;
}

代码样例:

<!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>CSS 三角制作</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }
        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }
        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }
        .jd span {
            position: absolute;
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;  
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="jd">
        <span></span>
    </div>
</body>
</html>

CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
 更改用户的鼠标样式
 表单轮廓
 防止表单域拖拽

鼠标样式 cursor

li {

cursor: pointer;

}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

样例:

<!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>用户界面样式-鼠标样式</title>
</head>
<body>
    <ul>
        <li style="cursor: default;">我是默认的小白鼠标样式</li>
        <li style="cursor: pointer;">我是鼠标小手样式</li>
        <li style="cursor: move;">我是鼠标移动样式</li>
        <li style="cursor: text;">我是鼠标文本样式</li>
        <li style="cursor: not-allowed;">我是鼠标禁止样式</li>
    </ul>
</body>
</html>

轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

input {outline: none; }

防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的。

textarea{ resize: none;}

样例:

<!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>用户界面样式-表单轮廓和防止拖拽文本域</title>
    <style>
        input, textarea {
            /* 取消表单轮廓 */
            outline: none;
        }
        textarea {
            /* 防止拖拽文本域 */
            resize: none;
        }
    </style>
</head>
<body>
    <!-- 1. 取消表单轮廓 -->
    <input type="text">
    <!-- 2. 防止拖拽文本域 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>

    
</body>
</html>

18 CSS三角 用户界面样式

18 CSS三角用户界面样式