css3盒子相关样式布局相关样式实现CSS3中的滤镜特效

最新推荐文章于 2024-06-08 00:00:00 发布

chenggou9601

最新推荐文章于 2024-06-08 00:00:00 发布

阅读量97

点赞数

原文链接：https://my.oschina.net/u/3161974/blog/919528

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Insert title here</title>
    <style>
        /*1.盒的类型
        在css中，使用display属性来定义盒的类型。总体来说，css中的盒分为block类型与inline类型。例如，div元素与p元素属于block类型，
        span元素与a元素属于inline类型
        inline-block类型盒属于block类型盒的一种，但是在显示时具有inline类型盒的特点
        使用inline-block类型来执行分列显示  使用inline-block类型来显示水平菜单
        inline-table，因为table元素属于block类型，所以不能与其他文字处于不同的行中，但是如果将table元素修改成inline-table类型，
        就可以让表格与其他文字处于同一行中了
        list-item,如果在display属性中将元素的类型设定为list-item类型，可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记
        run-in类型与compact类型,将元素指定为run-in类型或compact类型时，如果元素后面还有block类型的元素，run-in类型的元素将被包含在后面的
        block类型的元素内部，而compact类型的元素将被放置在block类型的元素左边
        text-overflow属性，可以在盒的末尾显示一个代表省略的符号"..."但是text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效
        */
        /*2.对盒使用阴影
        box-shadow属性让盒在显示时产生阴影效果
        box-shadow:length length length color前面3个length分别指阴影离开文字的横方向距离、阴影离开文字的纵向距离和阴影的模糊半径，color指阴影的颜色
        创建盒内阴影  可以通过一个可选的inset关键字在盒元素内部创建阴影，该阴影只被创建在盒元素内部，超出元素边框的部分将被裁剪
        可以单独对盒内的子元素使用阴影
        可以使用first-letter选择器或first-line选择器来只让第一个文字或第一行具有阴影效果。
        可以使用box-shadow属性让表格及表格内的单元格产生阴影效果
        */
        /*指定针对元素的高度与宽度的计算方法
         使用box-sizing属性的目的是对元素的总宽度做一个控制，如果不使用该属性，样式中默认使用的是content-box属性值，它只对内容的宽度做了一个指定，却没有
         对元素的总宽度进行指定。
                 */
       /*div.inlineblock{*/
           /*display: inline-block;*/
           /*background-color: #00aaff;*/
          /**/
       /*}*/
        /*div .inline{*/
            /*display: inline;*/
            /*background-color: #aaff00;*/
           /**/
        /*}*/
        /*div#a,div#b{*/
            /*!*display: inline-block;*!*/
            /*!*width: 200px;*!*/
            /*!*vertical-align: top;*!*/
            /*display: list-item;*/
            /*list-style-type: circle;*/
            /*margin-left: 30px;*/
        /*}*/
        div:first-letter{
            background-color: #ffaa00;
            box-shadow:inset -10px -10px 10px gray;
            width: 200px;
            height: 100px;
        }
        /*div#a{*/
            /*background-color: #0088ff;*/
        /*}*/
        /*div#b{*/
            /*background-color: #00ccff;*/
        /*}*/
        /*div#c{*/
            /*width: 400px;*/
            /*background-color: #ffff00;*/
        /*}*/
        table{
            border-spacing: 10px;
            box-shadow: 5px 5px 20px gray;
        }
        td{
            background-color: #ffaa00;
            box-shadow: 5px 5px 5px gray;
            padding: 10px;
        }
    </style>

</head>
<body>
<div>
<div id="a">A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div id="b">B B B B B B B B B B B B B B B B B B B B B B B B </div>
<div id="c">C C C C C C C C C C C C C C C C C C C C C C </div>
</div>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>0</td>
    </tr>
</table>

</body>
</html>

//布局相关样式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Insert title here</title>
    <style>
        /*#left-sidebar{*/
            /*float: left;*/
            /*width: 200px;*/
            /*padding: 20px;*/
            /*background-color: orange;*/
        /*}*/
        /*#contents{*/
            /*float: left;*/
            /*width: 300px;*/
            /*padding: 20px;*/
            /*background-color: yellow;*/
        /*}*/
        /*#right-sidebar{*/
            /*float: left;*/
            /*width: 200px;*/
            /*padding: 20px;*/
            /*background-color: limegreen;*/
        /*}*/
        /*#left-sidebar,#right-sidebar,#contents{*/
            /*box-sizing: border-box;*/
        /*}*/
        /*使用盒布局*/
        /*flex使盒布局变为弹性盒布局 使用弹性盒布局的时候，可以通过order属性来改变各元素的显示顺序
        可以使用flex-direction属性来指定多个元素的排列方向 row:横向排列 row-reverse:横向反向排列 column:纵向排列 column-reverse:纵向反向排列
        使用盒布局的时候元素的宽度与高度具有自适应性
        */
        /*flex-wrap样式属性来指定单行布局或多行布局，可指定样式属性值如下：nowrap:不换行 wrap:换行 wrap-reverse:虽然换行，但是换行方向
        与使用wrap样式属性值时的换行方向相反
        */
        /*calc方法，开发者可以通过使用该方法来自动计算元素的宽度、高度等数值类型的样式属性值  eg: width:calc(50%-100px)*/
        #container{
            /*display: -moz-box;*/
            /*display: -webkit-box;*/
            display: flex;
            flex-direction: column;
            -moz-box-orient: horizontal;
            -webkit-box-orient: horizontal;
            border: solid 5px blue;
            height: 800px;
        }
        #left-sidebar{
            /*order: 3;*/
            /*width: 200px;*/
            /*padding: 20px;*/
            background-color: orange;
        }
        #contents{
            /*order: 1;*/
             /*flex: 1;*/
             /*padding: 20px;*/
             background-color: yellow;
        }
        #right-sidebar{
            /*order: 2;*/
        /*width: 200px;*/
        /*padding: 20px;*/
        background-color: limegreen;
        }
        #left-sidebar,#right-sidebar,#contents{
        box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing:border-box;
        }
    </style>

</head>
<body>
<div id="container">
    <div id="left-sidebar">
        <h2>左侧边栏</h2>
        <ul>
            <li><a href="">超链接</a></li>
            <li><a href="">超链接</a></li>
            <li><a href="">超链接</a></li>
            <li><a href="">超链接</a></li>
            <li><a href="http://47.90.89.42:20009/card/card1.png" download="">超链接ddd</a></li>
        </ul>
    </div>
    <div id="contents">
        <h2>内容</h2>
        <p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
            示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</p>
    </div>
    <div id="right-sidebar">
        <h2>右侧边栏</h2>
        <ul>
            <li><a href="">超链接</a></li>
            <li><a href="">超链接</a></li>
            <li><a href="">超链接</a></li>
        </ul>
    </div>
</div>
<div></div>
</body>
</html>

实现CSS3中的滤镜效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Insert title here</title>
    <style>
        div{
            display: flex;
            flex-direction: row;
        }
        figure{
            width: 50%;
            text-align: center;
        }
        figure:nth-child(2){

            filter: grayscale(100%);/*将彩色图像转换为灰度图像*/
            -webkit-filter:grayscale(100%) ;
            filter: sepia(100%);/*该滤镜为彩色图片添加一层褐色色调*/
            -webkit-filter: sepia(100%);
            filter:saturate(250%);/*该滤镜用于增强彩色图像的饱和度*/
            -webkit-filter: saturate(250%);
            filter:hue-rotate(180deg);/*该滤镜是一个非常特殊的滤镜，可以用于产生特殊的视觉效果 样式属性中使用一个角度值为参数，参数值代表图像颜色环旋转的角度*/
            -webkit-filter: hue-rotate(180deg);
            filter: invert(100%);/*该滤镜将图像颜色翻转，样式属性使用一个百分比数值作为参数，用于定义图像颜色的翻转程度，
            当参数值为100%时的作用相当于为一副照片进行反相处理*/
            -webkit-filter: invert(100%);
            filter:opacity(50%);/*该滤镜为图像产生透明或半透明效果*/
            -webkit-filter: opacity(50%);
            filter: contrast(200%);/*就像控制电视机上的亮度一样，该滤镜可以在全黑与原图像亮度之间调整图像的对比度*/
            -webkit-filter: contrast(200%);
            filter: blur(2px);/*该滤镜的作用类似于在图像上添加一层玻璃遮罩，使图像具有一种烟雾效果*/
            -webkit-filter: blur(2px);
            filter: drop-shadow(4px -4px 6px purple);/*该滤镜的作用是为图像添加一层阴影效果，就好像太阳照在图像上使其产生一个影子一样
             样式属性中使用多个可选参数，分别用于指定阴影的横向方向偏移距离、纵方向偏移距离、阴影的模糊半径以及阴影的颜色*/
            -webkit-filter: drop-shadow(4px -4px 6px purple);

        }
    </style>

</head>
<body>
<div>
    <figure>
        <img src="card1.png" alt="">
        <figcaption>原始图片</figcaption>
    </figure>
    <figure>
        <img src="card1.png" alt="">
        <figcaption>使用灰度滤镜</figcaption>
    </figure>
</div>
</body>
</html>

转载于:https://my.oschina.net/u/3161974/blog/919528