css3 妙味

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_30622107

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/gyz418/p/5443650.html

本文深入探讨CSS3的高级特性，包括属性选择器、结构选择器、文本伪类、弹性盒模型等内容。通过实例展示了如何使用这些特性实现复杂的布局效果。

css3 属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css3属性</title>
</head>
<body>
<h1>自定义属性p[kang]</h1>

<!--<style>
    p[kang]{color:red;}   /*属性选择器*/
    p[kang=k]{border:1px solid green;}    /*指定 k */
    p[kang~="two"]{border:1px solid blue;}   /*属性含有two 可加"" 可不加*/
    /*p[kang~=two]{border:1px solid deeppink;}   */
    p[kang^=s]{font-size:40px;}       /*属性以s 开头*/
    p[kang$=e]{border:1px solid #009cec;}       /*属性以e结尾 */
    p[kang*=o]{background: #ccc;}   /*含有 o */
    p[kang|=a]{background: #009cec;}   /*只有a 或以 a-开头*/
</style>
<p kang="k">1</p>
<p kang="j two">2</p>
<p kang="santwo">3</p>
<p kang="hoe">4</p>
<p kang="a">5</p>
<p kang="ab">6</p>
<p kang="a-b">7</p>-->
<h1>属性应用</h1>

<!--
<h2>对不同href的给予不同的背景图片</h2>
<style>
    p{height:30px; line-height:30px; font-size:12px;border:1px solid #000;}
    p a{background:url(img/w.gif) no-repeat 3px center;padding-left:20px; display:block;}
    p a[href*=text]{ background-image:url(img/text.gif);}
    p a[href*=pdf]{ background-image:url(img/swf.gif);}
    p a[href*=exl]{ background-image:url(img/x.gif);}
</style>
<p>
    <a href="/doc/javascript.html">妙味课堂</a>
</p>
<p>
    <a href="/text/javascript.html">妙味课堂</a>
</p>
<p>
    <a href="/pdf/javascript.html">妙味课堂</a>
</p>
<p>
    <a href="/exl/javascript.html">妙味课堂</a>
</p>
-->
<h1>结构选择器</h1>
<style>
    p{height:30px;border:1px solid #000;}
    p:nth-child(2){color:red;}   /*找 p的父元素div下的第二个元素，如果是p元素，则为红色*/
    body *:nth-child(2){color:deeppink;}   /*找第二个元素*/
    p:nth-of-type(2){border:1px solid green;}  /*找 p的父元素div下的第二个p*/
    /*p:nth-child(odd){background:red;}   /!* odd 奇数行 *!/*/
    /*nth-last-child

    :first-child == :nth-child(1)
    :last-child == :nth-last-child(1)
    :first-of-type == nth-of-type(1)
    :last-of-type == nth-last-of-type(1)

    */
    p:empty{background: blue;}
    p:only-of-type{background:yellow;}
    p:only-child{background: orange;}   /*只有一个子节点，且子节点不包含文本节点*/
    /* p: only-of-type*/
    span{display: block; width:10px;height: 10px;}
</style>
<div>
    <p>p1</p>
    <h1>h1</h1>
    <p>p2</p>
    <p>p3</p>
    <p></p>      <!--p:empty-->
    <p><span></span></p>

</div>
</body>
</html>

css3 2.0

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        p{width:300px;border:1px solid #000;font:12px/30px "宋体";padding:10px;}
        p:first-line{ background:red;}   /*文本第一行*/
        p:first-letter{ font-size:30px;}  /*第一个字母*/
        p::selection{background:#F60;color:#690;}   /*选择文字的效果*/
        div~span{color:green;}   /*div 后面的 span 123*/
        h1:not(.test){background: red;}    /*过滤class */
        /*文字从右到左排列 ie6支持*/
        h2{width:300px;border:1px solid #000;font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;}
        /*文字超出隐藏 ie6支持*/
        h3{width:100px;border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    </style>
</head>
<body>
<p>p文本伪类：前端开发的世界从未有过无声的寂静，精彩纷呈的互联网也不曾出现片刻安宁，
    在 HTML5&CSS3 被炒至沸沸扬扬的今天，
</p>
<div><span>456</span></div>
<span>123</span>
<h1>h1</h1>
<h1 class="test">h2</h1>
<h1>h3</h1>
<h2>文字从右到左排列</h2>
<h3>文字超出隐藏123565636834634466346346</h3>
</body>
</html>

css3 弹性盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css弹性盒模型</title>
</head>
<body>
<style>
    .box {
        height: 170px;
        border: 10px solid #000;
        padding: 10px;
        display: -webkit-box; /* 盒模型 */
        /*-webkit-box-orient:vertical;  !*排列顺序  默认横排*!*/
        /*-webkit-box-direction:Reverse;  !*  反序 *!*/
        -webkit-box-pack: justify;   /*  富裕空间    end 是右对齐  center 是居中  justify 分散对齐 */
        -webkit-box-align: end;  /*  靠底 */

    }

    .box div {
        width: 100px;
        height: 100px;
        background: red;
        border: 1px solid #fff;
    }

    /* 具体调整各个div位置 */
    /*
    .box div:nth-of-type(1) {-webkit-box-ordinal-group: 2;}
    .box div:nth-of-type(2) {-webkit-box-ordinal-group: 4;}
    .box div:nth-of-type(3) {-webkit-box-ordinal-group: 1;}
    .box div:nth-of-type(4) {-webkit-box-ordinal-group: 5;}
    .box div:nth-of-type(5) {-webkit-box-ordinal-group: 3;}
    */
    /* 指定宽度 box-flex */
 /*
    .box div:nth-of-type(1){width:300px;}
    .box div:nth-of-type(2){-webkit-box-flex:2;}  /*  占  2/ 2+3+4+5 =  2/14 */
 /*   .box div:nth-of-type(3){-webkit-box-flex:3;}
    .box div:nth-of-type(4){-webkit-box-flex:4;}
    .box div:nth-of-type(5){-webkit-box-flex:5;}
    */
</style>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>
</html>

css3 div上下左右都居中 height:100% -webkit-box-align:center;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
html{height:100%;}
body{height:100%;margin:0;}
.box{height:100%; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:center; -webkit-box-align:center;}
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
</style>
</head>
<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>
</html>

弹性盒模型：父元素 display:-webkit-box;

box-orient: horizontal / vertical 水平垂直显示

box-direction: normal / reverse 元素正序反序

box-oridinal-group 设置元素具体位置，见上面例子

box-flex 弹性空间可指定各元素不同宽度，以及自适应比例

•子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

box-pack 富裕空间处理（元素水平对齐方式，分散对齐等）

start左对齐 end右对齐 center justify

box-align 元素垂直对齐方式

star顶对齐 end center

阴影 box-shadow :[inset] x y blur [spread] color

内投影阴影偏移模糊半径扩展模糊半径

图片倒影 img{ display:block;-webkit-box-reflect:below;}

above|below|left|right;

可拖动 resize 边框大小

both:水平垂直都可缩放 horizontal 水平缩放 vertical 垂直缩放

.box{width:100px;height:100px;background:url(miaov.jpg);border:5px solid #000; resize:both; overflow:auto;}

怪异盒模型，忽略div 的padding 和 border宽度属性 box-sizing:border-box

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:200px;height:200px;padding:50px;border:10px solid #000; box-sizing:border-box;}   
.div{height:50px;background:red;}
</style>
</head>
<body>
<div class="box">
    <div class="div"></div>
</div>
Content-box  标准盒模型 width/height=border+padding+content
box-sizing:border-box 怪异盒模型 width/height=content div宽度直接等于指定宽高，忽略padding 和border值
</body>
</html>

分栏：

-webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid #000;

lcolumn-width 栏目宽度

lcolumn-count 栏目列数

lcolumn-gap 栏目距离

lcolumn-rule 栏目间隔线

进度条

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.wrap{width:200px;height:30px;overflow:hidden;border:1px solid #000;}
.box{width:400px;height:30px;background:-webkit-repeating-linear-gradient(15deg,green 0,green 10px,#fff 10px,#fff 20px); transition:3s;}
.wrap:hover .box{ margin-left:-100px;}
</style>
</head>
<body>
<div class="wrap">
    <div class="box"></div>
</div>
</body>
</html>

百度光斑有3个地方应用了位置调整，第一个，rgba有150px的透明，第二个整体背景偏移，第三个hover再偏移

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:300px;height:300px;
background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 150px,rgba(255,255,255,1) 170px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 210px) no-repeat -200px 0,url(new_bg.png) no-repeat; transition:1s;}
.box:hover{background-position:300px 0,-100px -100px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>