html5中的CSS属性

最新推荐文章于 2022-06-11 17:25:43 发布

我叫干脆面

最新推荐文章于 2022-06-11 17:25:43 发布

阅读量536

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/sinat_26918145/article/details/51859076

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .menu ul{
        border-top:15px solid black;
        padding: 0 10px;
        list-style-type: none;
    }
    .menu ul li a{
        color: #fff;
        float:left;
        margin:0 5px;
        font-size: 14px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        width: 65px;
        padding: 10px 5px;
        background: #151515;
        border-radius: 0 0 5px 5px;
    }
    .menu ul li.rotate a{
         background: #D50E19;
    }
    .menu ul li.scale a{
        background: #0c7cb5;
    }
    .menu ul li.scale-x a{
        background: #031a26;
    }
    .menu ul li.scale-y a{
        background: #1b0076;
    }
    .menu ul li.translate a{
        background: #1d421d;
    }
    .menu ul li.translate-x a{
        background: #90cf90;
    }
    .menu ul li.translate-y a{
        background: #8d6cff;
    }
    .menu ul li.skew a{
        background: #D50E19;
    }
    .menu ul li.skew-x a{
        background: #d36363;
    }
    .menu ul li.skew-y a{
        background: #c85e0b;
    }
    .menu ul li.mutil a{
        background: #d39f00;
    }
    .menu ul li.origin a{
        background: #d83832;
    }


    .menu ul li.rotate a:hover{
        transform: rotate(25deg);
    }
    .menu ul li.scale a:hover{
        transform: scale(0.8,0.8);
    }
    .menu ul li.scale-x a:hover{
        transform: scaleX(0.5);
    }
    .menu ul li.scale-y a:hover{
        transform: scaleY(0.5);
    }
    .menu ul li.translate a:hover{
        transform: translate(-10px,-10px);
    }
    .menu ul li.translate-x a:hover{
        transform: translateX(10px);
    }
    .menu ul li.translate-y a:hover{
        transform: translateY(10px);
    }
    .menu ul li.skew a:hover{
        transform: skew(45deg,15deg);
    }
    .menu ul li.skew-x a:hover{
        transform: skewX(-30deg);
    }
    .menu ul li.skew-y a:hover{
         transform: skewY(-30deg);
    }
    .menu ul li.mutil a:hover{
        transform: rotate(45deg) scale(1.2,1.2);
    }

    .menu ul li.origin a:hover{
        transform-origin: left top;
    }
    .menu ul li.origin a:hover{
        transform: rotate(25deg);
    }
</style>
<body>
<h3>CSS3新属性特性</h3>
<ul>
    <p>CSS3属性选择器</p>
    <li>E[attr ^= "val"]:属性attr开头以val的元素</li>
    <li>E[attr $= "val"]:属性attr结尾以val的元素</li>
    <li>E[attr *= "val"]:属性attr包含val的元素</li>
    <p>CSS3伪类选择器</p>
    <li>:root  匹配文档的跟元素</li>
    <li>E:nth-child(n)  选择所有在其父节点中的第n个位置匹配E的子元素</li>
    <li>E:nth-last-child(n)  选择所有在其父节点中的倒数第n个位置匹配E的子元素</li>
    <li>E:nth-of-type(n)  选择所有在其父节点中同类型的第n个位置匹配E的子元素</li>
    <li>E:nth-last-of-type(n)  选择所有在其父节点中同类型的倒数第n个位置匹配E的子元素</li>
    <li>E:last-child  选择所有在其父节点中最后一个个位置匹配E的子元素</li>
    <li>E:first-of-type  选择所有在其父节点中匹配E的第一个同类型子元素</li>
    <li>E:last-of-type  选择所有在其父节点中匹配E的最后一个同类型子元素</li>
    <li>E:only-child  选择所有在其父节点只包含一个子元素，且该子元素匹配E</li>
    <li>E:only-of-type  选择所有在其父节点只包含一个同类型子元素，且该子元素匹配E</li>
    <li>E:empty  选择匹配E，且该元素不含有子元素</li>
    <li>::selection  例如：::selection{color:red}在页面上只要被选中的文字颜色都变成红色</li>
    <li>out-of-range  input:out-of-range{border 2px solid red}在输入框中填写数字范围，如果超出了范围，则显示红色</li>
    <li>in-range  input:in-range{border 2px solid green}在输入框中填写数字范围，如果符合范围，则显示绿色</li>
    <li>optional：可选，input[type="text"]:optional{background:green}可选input</li>
    <li>required：必填，input[type="text"]:required{background:red}必填input</li>
    <li>E ~ F：选择F元素，且匹配在E元素后的F元素</li>
    <li>E:not(s) : 选择匹配E元素，且过滤掉S选择符的任意元素，例如：p:not(.class1)选择过滤掉class=class1的p元素</li>
    <li>target：例如a标签中href="#id"，点击后会跳转到id为id=id的p标签上，:target{background:green}可以定义其target锚为什么样式</li>
    <p>CSS3边框属性</p>
    <li>border-radius:设置边框圆角</li>
    <li>border-image:这个属性允许你为元素添加边框背景，值：source,slice,width,outset,repeat，例子：#round{border-image:url("xx.png") 30 round}</li>
    <li>border-shadow：可以设置一个或多个下拉阴影的框,值：h-shadow水平阴影位置,v-shadow垂直阴影位置,blur可选，模糊距离,spread可选，阴影大小,color可选，阴影颜色，例子：box-shadow:10px 10px 5px #888888</li>
</ul>
<h3>CSS的2D变形</h3>
<ul>
    <p>Transform属性介绍</p>
    <li>transform属性对元素实现一些变形功能，可用于一些内联元素块级元素，该属性可以旋转，缩放，移动</li>
    <p>常用的变形函数</p>
    <li>translate()沿着x,y移动元素</li>
    <li>scale()改变元素的高和宽，取值包括正数，负数，以及小数</li>
    <li>rotate()旋转元素对象，取值为一个度数值</li>
    <li>skew()倾斜元素对象，取值为一个度数值</li>
    <li>transform-origin:重新定义图像元素的原点，参数(x,y),x:left,center,right,length,%。y:left,center,right,length,%。</li>
</ul>
<div class="menu">
    <ul class="clearfix">
        <li class="item rotate"><a href="#">Rotate</a></li>
        <li class="item scale"><a href="#">Scale</a></li>
        <li class="item scale-x"><a href="#">Scale-x</a></li>
        <li class="item scale-y"><a href="#">Scale-y</a></li>
        <li class="item translate"><a href="#">translate</a></li>
        <li class="item translate-x"><a href="#">translate-x</a></li>
        <li class="item translate-y"><a href="#">translate-y</a></li>
        <li class="item skew"><a href="#">skew</a></li>
        <li class="item skew-x"><a href="#">skew-x</a></li>
        <li class="item skew-y"><a href="#">skew-y</a></li>
        <li class="item mutil"><a href="#">mutil</a></li>
        <li class="item origin"><a href="#">origin</a></li>
    </ul>
</div>
</body>
</html>

我叫干脆面

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5中的CSS属性

.menu ul{ border-top:15px solid black; padding: 0 10px; list-style-type: none; } .menu ul li a{ color: #fff; float:left; margin:0 5px; f
复制链接

扫一扫

专栏目录