CSS笔记(17)

y191024

发布于 2022-09-20 19:32:57

9700

文章被收录于专栏：睡不着所以学编程睡不着所以学编程

CSS三角的做法

有时候我们会看到网页中盒子边边有一些小三角,这种小三角是可以直接用CSS写出来的.

这个的方法特别神奇...如果设置一个没有宽度和高度的盒子,只设置边框,然后为每个边框设置不同的颜色,就会得到这样的图形

所以我们要想得到某一个三角形,只要将所有的边框都设置为透明的,只给我们想要的三角形所在的边框一个颜色.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三角</title>
    <style>
        .box {
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-bottom-color: blue;
            margin: 100px auto;
        }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

得到的就是这样的图形:

现在做一个案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三角</title>
    <style>
        .jd {
            background-color: pink;
        }
        .jd {
            position: relative;
            width: 100px;
            height: 200px;
        }
        .tran {
            position: absolute;
            top: 10px;
            left: 99px;
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-left-color: pink;
        }
</style>
</head>
<body>
    <div class="box"></div>
    <div class="jd">
        <div class="tran"></div>
    </div>
</body>
</html>

CSS用户界面样式

什么是界面样式:所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验.

更改用户的鼠标样式
表单轮廓
防止表单域拖拽

鼠标样式

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

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

不同效果如下:

pointer

轮廓线

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

input { outline: none; }

原本点击文本框后是这样的效果:

去掉轮廓后是这样的效果:

防止拖拽文本域

像我们的留言板,评论的地方,一般都是textarea文本域做的,但是默认的是可以拖拽改变大小的,但在实际中是不可能这么做的,所以我们要防止文本域的拖拽.

语法:

textarea { resize : none ;}

加上以后的效果:

vertical-align

CSS的 vertical-align属性使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐.

官方解释: 用于设置一个元素的垂直对齐方式,但是它只针对行内元素或者行内块元素有效.

语法

vertical-align: baseline | top | middle | bottom

值	描述
baseline	默认.元素防止在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐