CSS3学习笔记（四）

2019-08-26 本文已影响0人 dev_winner

在Web的表单中，有些表单元素有可用（:enabled）和不可用（:disabled）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处于可用状态。我们可以通过伪选择器:enabled对这些表单元素设置样式。:disabled选择器用来选择不可用表单元素。要正常使用它，则需在表单元素的HTML中设置disabled属性，即disabled="disabled"。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属性选择器</title>
    <style type="text/css">
    div {
        margin: 30px;
    }
    /*设置元素可用的样式*/
    input[type="text"]:enabled {
        border: 1px solid #f36;
        box-shadow: 0 0 5px #f36;
    }
    /*设置元素不可用的样式*/
    input[type="text"]:disabled {
        box-shadow: none;
        border: 1px solid black; 
    }
    </style>
</head>
<body>
    <form action="#">
        <div>
            <!-- 标签的 for 属性中的值与相关控件的 id 属性值一定要相同。 -->
            <label for="enabled">可用输入框:</label>
            <input type="text" id="enabled" />
        </div>
        <div>
            <label for="disabled">禁用输入框:</label>
            <input type="text" id="disabled" disabled="disabled" />
            <!-- 设置不可用 disabled属性值-->
        </div>
    </form>
</body>
</html>

设置可用状态的元素样式

相邻兄弟选择器（Adjacent sibling selector）：可选择紧接在另一元素后的元素，且二者有相同父元素。例如，若要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属性选择器</title>
    <style type="text/css">
    form {
        border: 1px solid #ccc;
        padding: 20px;
        width: 300px;
        margin: 30px auto;
    }
    .wrapper {
        margin-bottom: 10px;
    }
    .box {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin-right: 10px;
        /*设置父元素为相对定位*/
        position: relative;
        background: orange;
        /*设置元素的垂直对齐方式：
        把此元素放置在父元素的中部。*/
        vertical-align: middle;
        border-radius: 100%;
    }
    .box input {
        /*设置input元素的透明度，取值为0~1*/
        opacity: 0;
        /*设置子元素为绝对定位*/
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*设置元素的堆叠顺序：使input按钮在span的上一层，否则点击区域会出现不灵敏的情况*/
        z-index: 100;
    }
    /*自定义内圆圈样式*/
    .box span {
        /*span为行内元素，改为块级元素可设置宽高等*/
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        position: absolute;
        background: #fff;
        top: 50%;
        left: 50%;
        margin: -5px 0 0 -5px;
        /*设置span在input元素下一层*/
        z-index: 1;
    }
    input[type="radio"]+span {
        opacity: 0;

    }
    /*设置被选中的元素透明度为1，即将其显示出来*/
    input[type="radio"]:checked+span {
        opacity: 1;
    }
    </style>
</head>
<body>
    <form action="#">
        <div class="wrapper">
            <div class="box">
                <input type="radio" checked="checked" id="boy" name="1" /><span></span>
            </div>
            <label for="boy">男</label>
        </div>
        <div class="wrapper">
            <div class="box">
                <input type="radio" id="girl" name="1" /><span></span>
            </div>
            <label for="girl">女</label>
        </div>
    </form>
</body>
</html>

设置单选框样式

::selection伪元素：用来匹配突出显示的文本（用鼠标选择文本时的文本）。浏览器默认情况下，用鼠标选择网页文本是以深蓝的背景，白色的字体显示的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>::selection选择器</title>
    <style type="text/css">
    ::selection {
        background: orange;
        color: white;
    }
    </style>
</head>
<body>
    <p>用鼠标选中这行文字，你将会看到不一样的效果！</p>
</body>
</html>

设置鼠标选中文本时的文本效果

:read-only伪类选择器：指定处于只读状态元素的样式。其中，标签元素中设置了属性readonly="readonly"。
:read-write选择器：用来指定当元素处于非只读状态时的样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属性选择器</title>
    <style type="text/css">
    form {
        width: 300px;
        padding: 10px;
        border: 1px solid #ccc;
        margin: 50px auto;
    }
    form>div {
        margin-bottom: 10px;
    }
    input[type="text"] {
        border: 1px solid orange;
        padding: 5px;
        background: #fff;
        border-radius: 5px;
    }
    /*设置只读状态的标签的样式*/
    input[type="text"]:read-only {
        border-color: #ccc;
    }
    textarea:read-only {
        border: 1px solid #ccc;
        height: 50px;
        resize: none;
        background: #eee;
        border-radius: 5px;
    }
    /*设置非只读状态的标签的样式*/
    input[type="text"]:read-write{
        border-color: #f36;
    }
    </style>
</head>
<body>
    <form action="#">
        <div>
            <label for="name">姓名:</label>
            <input type="text" name="name" id="name" placeholder="张三" />
        </div>
        <div>
            <label for="address">地址:</label>
            <input type="text" name="address" id="address" placeholder="中国深圳" readonly="readonly" />
            <!-- 规定文本区域为只读 -->
        </div>
        <div>
            <label for="comment">评论：</label>
            <textarea name="comment" id="" cols="30" rows="10" readonly="readonly" placeholder="这里的文本区域只读不可写！"></textarea>
        </div>
    </form>
</body>
</html>

设置只读和非只读文本区域的样式

::before和::after这两个主要用来给元素的前面或后面插入内容，常和属性"content"（指定要插入的内容）配合使用，使用的场景最多的就是清除浮动。一般代码编写如下：

.clearfix::before,
.clearfix::after {
    content: "."; /* 可以是空串，但不能不写*/
    display: block; /*只有作为块级元素才能清除浮动*/
    height: 0;
    visibility: hidden; /*规定元素是否可见*/
}
.clearfix:after {clear: both;} /*清除左浮动和右浮动，若只清除左浮动就写clear:left，右同理*/
.clearfix {zoom: 1;}

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>before、after</title>
    <style>
    .box h3 {
        /*文字居中*/
        text-align: center;
        /*父元素为相对定位*/
        position: relative;
        /*距离当前所在盒子的顶部为80像素*/
        top: 80px;
    }
    .box {
        /*盒子宽*/
        width: 70%;
        /*盒子高*/
        height: 200px;
        /*背景颜色*/
        background: #fff;
        /*外边距：上下40px，左右自适应*/
        margin: 40px auto;
    }
    .effect {
        /*父元素为相对定位*/
        position: relative;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        /*盒子阴影*/
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
    /*同时设置before和after，增强阴影效果*/
    .effect::before,
    .effect::after {
        /*插入的内容为空*/
        content: "";
        position: absolute;
        /*隐藏在div下一层，作为阴影层*/
        z-index: -1;
        -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
        -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
        /*注意必须设置上右下左四个方向的位置，否则浏览器不能解析该样式*/
        top: 50%;
        bottom: 0;
        left: 10px;
        right: 10px;
        -moz-border-radius: 100px / 10px;
        /*设置圆角：水平半径/垂直半径*/
        border-radius: 100px / 10px;
    }
    </style>
</head>
<body>
    <!-- 引用两个类，effect作为阴影层，便于其他元素的引用，以降低代码的冗余 -->
    <div class="box effect">
        <h3>Shadow Effect </h3>
    </div>
</body>
</html>

设置伪元素before和after

CSS3变形

旋转rotate()函数：通过指定的角度参数使元素相对原点进行旋转。若参数为正值，则元素相对原点中心顺时针旋转；若参数为负值，则元素相对原点中心逆时针旋转。
transform属性应用于元素的2D或3D转换，其允许你将元素旋转，缩放，移动，倾斜等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>变形与动画</title>
    <style type="text/css">
    .wrapper {
        margin: 100px auto;
        width: 300px;
        height: 200px;
        border: 2px dotted blue;
    }
    .wrapper div {
        width: 300px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        background: green;
        color: #fff;
        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        /*逆时针旋转20度*/
        transform: rotate(-20deg);
    }
    .wrapper span {
        /*改为块级元素，将文本旋转回到原来水平位置。*/
        display: block;
        -webkit-transform: rotate(20deg);
        -moz-transform: rotate(20deg);
        /*顺时针选择20度*/
        transform: rotate(20deg);
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div><span>我不想旋转(^_^)</span></div>
    </div>
</body>
</html>

设置元素旋转

扭曲skew()函数（2D）：可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。rotate()函数只是旋转，而不会改变元素的形状；skew()函数不会旋转，而只会改变元素的形状。
1、skew(xdeg,ydeg)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；第一个参数对应X轴（横向倾斜度数），第二个参数对应Y轴（纵向倾斜度数）。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
2、skewX(xdeg)仅使元素在水平方向扭曲变形（X轴扭曲变形）。x取值为正，X轴（水平方向）不动，Y轴（竖直方向）逆时针倾斜一定角度。x取值为负，X轴（水平方向）不动，Y轴（竖直方向）顺时针倾斜一定角度。
3、skewY(ydeg)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。y取值为正，y轴（竖直方向）不动，x轴（水平）顺时针倾斜一定角度。y取值为负，y轴（竖直方向）不动，x轴（水平方向）逆时针倾斜一定角度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>变形与动画</title>
    <style type="text/css">
    .wrapper {
        width: 300px;
        height: 100px;
        /*边界为点线形式*/
        border: 2px dotted red;
        margin: 30px auto;
    }
    .wrapper div {
        width: 300px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        /*字体颜色*/
        color: #fff;
        background: green;
        -webkit-transform: skew(45deg);
        -moz-transform: skew(45deg);
        /*Y轴逆时针倾斜45度*/
        transform: skew(45deg);
    }
    .wrapper span {
        display: block;
        /*Y轴顺时针倾斜45度*/
        -webkit-transform: skew(-45deg);
        -moz-transform: skew(-45deg);
        transform: skew(-45deg);
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div><span>我不想被扭曲(^_^)</span></div>
    </div>
</body>
</html>

横向倾斜

scale()缩放函数：将元素根据中心原点进行缩放。
1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）举个例子：scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。注意：Y是一个可选参数，若没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。scale()的取值默认为1，当值设置为0.01~0.99之间的任何值，都将一个元素缩小；而任何 $\ge 1.01$ 的值，都将一个元素放大。
2、scaleX(x)元素仅水平方向缩放（X轴缩放）。
3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）。

设置缩放

translate()函数：将元素向指定的方向移动，类似于position中的relative。也就是说，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；
2、translateX(x)仅水平方向移动（X轴移动）；
3、translateY(y)仅垂直方向移动（Y轴移动）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>变形与动画</title>
    <style type="text/css">
    /*不知道宽度和高度的元素情况下实现水平、垂直居中。*/
    .wrapper {
        padding: 20px;
        background: orange;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        border: 1px solid black;
        border-radius: 5px;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        /*往上（x轴）,左（y轴）移动自身宽高的 50%，以使其居于中心位置。*/
        transform: translate(-50%, -50%);
    }
    /*简单的移动*/
    .wrapper1 {
        float: left;
        width: 200px;
        height: 200px;
        border: 2px dotted red;
        margin: 20px auto;
    }
    .wrapper1 div {
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        background: orange;
        color: #fff;
        -webkit-transform: translate(50px, 100px);
        -moz-transform: translate(50px, 100px);
        /*从当前元素位置向右移动50px,向下移动100px*/
        transform: translate(50px, 100px);
    }
    </style>
</head>
<body>
    <div class="wrapper">
        我不知道我的宽度和高是多少，我要实现水平垂直居中
    </div>
    <div class="wrapper1">
        <div>我向右向下移动</div>
    </div>
</body>
</html>

移动元素

matrix()矩阵函数：一个含六个值(a,b,c,d,e,f)的变换矩阵，包含旋转，缩放，移动（平移）和倾斜功能。这6个参数通过矩阵计算推导可以得出如下结论：
1、平移：transform: matrix(1,0,0,1,e,f); <=>transform: translate(e,f);
2、缩放：transform: matrix(a,0,0,d,0,0);<=> transform: scale(a,d);
3、旋转：transform: matrix(cosθ, sinθ, -sinθ, cosθ,0,0);<=>transform: rotate(θdeg);
4、倾斜：transform: matrix(1, tanθy, tanθx, 1, 0, 0);<=>transform: skew(θx, θy);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>变形与动画</title>
    <style type="text/css">
    .wrapper {
        width: 300px;
        height: 200px;
        border: 2px dotted red;
        margin: 40px auto;
    }
    .wrapper div {
        width: 300px;
        height: 200px;
        background: orange;
        -webkit-transform: matrix(1, 0, 0, 1, 50, 50);
        /*参数1:宽度为比例1表示原大小，      
          参数2:上下倾斜:0就是不倾斜，
                        1就是2倍，
                        2就是3倍，      
          参数3:左右倾斜: 含义同上，    
          参数4:高度比例1就是原大小，
          参数5:X轴上的像素位移，X方向就是左右，
          参数6:Y轴上的像素位移，Y方向就是上下*/
        transform: matrix(1, 0, 0, 1, 50, 50);
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div></div>
    </div>
</body>
</html>

设置matrix

原点transform-origin：任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。我们可以通过设置属性transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：

transform-origin的取值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>变形与动画</title>
    <style type="text/css">
    .wrapper {
        width: 150;
        height: 150px;
        float: left;
        margin: 100px;
        border: 2px dotted red;
        line-height: 150px;
        text-align: center;
    }
    .wrapper div {
        background: orange;
        /*顺时针旋转45度*/
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .transform-origin div {
        /*改变元素原点到左上角*/
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>原点在默认位置处</div>
    </div>
    <div class="wrapper transform-origin">
        <div>原点重置到左上角</div>
    </div>
</body>
</html>

修改元素原点

参考文章

CSS3——CSS3矩阵matrix进行2D变换的数学原理

CSS3学习笔记（四）

CSS3变形

参考文章

猜你喜欢

热点阅读