CSS3其他

圆角边框

  • CSS3 圆角边框（IE9.0以前版本不支持）：

    • border-radius：[ length | % ]{1,4} / [ length | % ]{1,4}
    • border-top-left-radius:5px ;
    • border-top-right-radius:15px;
    • border-bottom-right-radius:20px;
    • border-bottom-left-radius:25px;
    • border-radius:5px 15px 20px 25px ;
    • border-radius:20px / 10px ;
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: #009ff2;

            /*8个值：1 2 3 4/5 6 7 8*/
            /*1 2 3 4代表横向上的4个位置    5 6 7 8 代表竖向上的4个位置*/
            border-radius: 10px 20px 30px 40px/50px 60px 70px 80px;

            /*设置每个角1个半径，总共4个值*/
            border-radius: 30px 40px 50px 60px;

            /*横向都是40  竖向都是60px*/
            border-radius: 40px/60px;

            /*左上右下是40  左下和右上是60*/
            border-radius: 40px 60px;

            border-radius: 40px/40px 70px;

            border-radius: 30px 50px 70px;
            border-radius: 30px 50px 70px 50px;

            border-radius: 40px;

            /*border-radius百分比是相对于自身的宽高*/
            border-radius: 10% 0 0 0;
        }
    </style>
</head>
<body>
<!--
    圆角边框：
        border-radius:允许设置元素的边框圆角
            当使用一个半径的时候，设置的是圆形的角
            当使用两个半径的时候，设置的是椭圆形的角

        值：可以是单位   百分比
-->
<div class="box"></div>
</body>
</html>

  • 练习

<!-- 畅言 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>畅言</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .outer{
            width: 500px;
            height: 300px;
            border: 1px solid #009ff2;
            border-radius: 20px;
            margin: 100px auto;
            position: relative;
        }

        .login{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            left: 30px;
            top: -57px;
            border: 1px solid #009ff2;

        }
        .login_in{
            width: 50px;
            height: 50px;
            margin: 15px;
            border-radius: 50%;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            color: #009ff2;
            border: 1px solid #009ff2;
            position: relative;
            z-index: 2;
        }
        .mask{
            width: 82px;
            height: 57px;
            background-color: #fff;
            position: absolute;
            left: 30px;
            top: -58px;
        }
    </style>
</head>
<body>
    <div class="outer">

        <div class="login">
            <div class="login_in">登录</div>
        </div>
        <div class="mask"></div>

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

文字阴影

  • text-shadow：none | length{2,3} color 默认值：none

    none： 无阴影

    第1个长度值：阴影水平偏移值。可为负值

    第2个长度值：阴影垂直偏移值。可为负值

    第3个长度值：可选，阴影模糊值。不允许负值

    color： 设置阴影的颜色

  • 练习

盒子阴影

  • box-shadow。

    和文本阴影相比，盒阴影多一个属性值——阴影外延值（第四个值）

    第一个字可选，可以设置内阴影

    box-shadow：none |inset length{2,4} color

  • 练习

倒影

  • box-reflect:倒影

    below / above / left / right offset

滤镜设置

  • 使用filter属性（IE不支持）

    blur(px)：模糊

    brightness(%)：亮度

    contrast(%)：对比度

    opacity(%)：透明度

    saturate(%)：饱和度

….

CSS3多列

什么是多列

  • css column 定义了多栏布局的模块
  • 表现出列之间怎么流动，及多列之间的间隙和分割线，并且使用了列高平衡，除了最后一列，其他列高度一样

多列的属性

  • column-count

    1. 定义：规定元素应该被分隔的列数
    2. 语法：column-count: number;

  • column-width

    1. 定义：列的宽度
    2. 语法：column-width:像素值

    column-count和column-width用来控制列的宽度和数量：

    • column-count是控制列数

    • column-width是控制每一列的最小宽度

    • column-count和column-width冲突的时候,分为栏数少的优先

    columns是简写，后边跟 count和width 也可以随意跟count和width其中的一个值

  • column-gap

    1. 定义：规定列之间的间隔
    2. 语法：column-gap: 像素值;

  • column-rule

    1. 定义：所有 column-rule-* 属性的简写属性(颜色，样式，宽度)

    2. 语法：column-rule: 颜色，样式，宽度;

    3. 列之间规则的颜色：[column-rule-color]

      列之间规则的样式：[column-rule-style]

      列之间规则的宽度：[column-rule-width]

  • column-span

    1. 定义：元素应该横跨的列数

    2. 语法：column-span:all

渐变

  • 渐变本质绘制的是一张图片（背景图片），所以使用background或者使用background-image （IE 6 7 8 9不支持）

  • 百分比：把元素渐变方向的整体长度看成100%

     

线性渐变

  • 渐变的写法：

    • 从上到下（默认）：background: linear-gradient(red,blue);
    • 从左到右：background: linear-gradient(to right,red,blue);
    • 对角：background: linear-gradient(to right bottom,red,blue);
    • 角度background: linear-gradient(45deg,red,blue);

  • 角度坐标

  • 重复渐变

    background: repeating-linear-gradient(90deg,red 0%,blue 20%);

    background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);

  • 练习

    image-20200627221757614 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地板砖</title>
    <style>
        .inner{
            width: 1000px;
            height: 1000px;
            /*background: linear-gradient(45deg,red 25%,transparent 25%,transparent 75%,red 75%),linear-gradient(135deg,red 25%,#fff 25%,#fff 75%,red 75%);*/
            background: repeating-linear-gradient(45deg,red 25%,transparent 25%,transparent 75%,red 75%,red 100%),repeating-linear-gradient(135deg,red 25%,#fff 25%,#fff 75%,red 75%,red 100%);

            background-size: 100px 100px;
        }
    </style>
</head>
<body>
<!--
    地板砖
-->
    <div class="inner"></div>
</body>
</html>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发廊灯</title>
    <style>
        .outer{
            width: 300px;
            height: 70px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        .con{
            width: 2000px;
            height: 70px;
            background: repeating-linear-gradient(45deg,#fff 0px,#fff 20px,#000 20px,#000 40px);
            transition: all 10s linear;
        }
        .outer:hover .con{
            margin-left: -1700px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="con"></div>
    </div>
</body>
</html>

径向渐变

  • radial-gradient()

    • 第一个参数：圆的类型

      ellipse：根据元素形状渐变，元素为正方形是显示效果与circle无异

      circle：渐变为最大的圆形

  • 第二个参数：执行径向渐变的大小

    farthest-corner:圆心到最远角

    closest-side：圆心到最近的边

    closest-corner：圆心到最近的角

    farthest-side：圆心到最远的边

    • 第三个参数：圆心的位置
    • 第四个参数：渐变的颜色点

.box{
    width: 1000px;
    height: 300px;
    background: radial-gradient(orangered,greenyellow);
    background: radial-gradient(circle,orangered,greenyellow);

    /*background: -webkit-radial-gradient(800px 100px, farthest-side,orangered,greenyellow);*/

    background: radial-gradient(at left top,orangered,greenyellow);
    /*background: radial-gradient(at center center,orangered,greenyellow);*/
}
posted @ 2023-01-10 22:39  z_bky  阅读(20)  评论(0)    收藏  举报