CSS3学习第二天

最新推荐文章于 2024-06-13 08:39:52 发布

你还要我怎样？

最新推荐文章于 2024-06-13 08:39:52 发布

阅读量78

点赞数

分类专栏： CSS学习文章标签： css3 学习 html

本文链接：https://blog.csdn.net/qq_46563235/article/details/127239666

版权

CSS学习专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1、文本阴影

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* 
            第一个10px  水平方向上的位移    可以是负值
            第二个10px   垂直方向上的位移   可以是负值
            第三个1px    模糊程度
            第四个red    阴影的颜色
            */
            /* 多个阴影在后边写，用逗号隔开 */
            text-shadow: 10px 10px 1px red,0px 10px 1px yellow;
        }
    </style>
</head>
<body>
    <div>
        大家好
    </div>
</body>
</html>

2、盒子阴影

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: yellow;
            margin: 0 auto;
            /* 
            第一个-10px    水平方向上，正值即向右
            第二个-10px    垂直方向，负值即往上
            第三个 10px    模糊程度
            第四个10px     阴影大小
            red              阴影的颜色


            多个阴影也是在后面加，利用逗号分隔开
             */
            /* box-shadow: -10px -10px 10px 10px red ,10px 10px 10px rgb(21, 0, 255); */
      
            /* 内阴影 */
            box-shadow: 10px 10px 10px blue inset;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3、圆角边框

例子1

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: green;
            margin: 0 auto;
            /* 
                圆角边框border-radius
                单位px或者% 
                一个值v1  四个角一样
                两个值v1，v2  左上右下   左下右上 一致
                三个值v1,v2,v3  左上  左下右上  右下
                四个值v1，v2，v3，v4  顺时针方向
            */
            border-radius: 10px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: red;
            margin: 0 auto;
            /* border-radius: 10px 50px; */



            /* 只实现一个方向的 */
            /* 得保证垂直方向在前，水平方向在后 */
            /* 左上角 */
            border-top-left-radius: 10px;
            /* 右上角 */
            border-top-right-radius: 20px;
            /* 左下角 */
            border-bottom-left-radius: 60px;
            /* 右下角 */
            border-bottom-right-radius: 100px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

例子2

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin: 0 auto;
            /* 
                30px/60px   水平/垂直    这种写法只支持border-radius
             */
            /* border-radius: 30px/60px; */
            /* border-top-left-radius: 30px/60px;   不支持这种写法 */

            border-radius: 10px 20px 30px 40px/50px 60px 70px 80px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

例子3

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 正方形里的圆 */
        .box1{
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background: green;
            padding: 20px;
            border: 20px solid red;
            border-radius: 50%;
        }

        /* 半圆形 */
        .box2{
            width: 100px;
            height: 50px;
            background: blue;
            margin: 0 auto;
            border-radius: 50px 50px 0 0;
      
        }

        /* 扇形 */
        .box3{
            width: 100px;
            height: 100px;
            background: blueviolet;
            margin: 0 auto;
            /* 可以调节值改变扇形方向 */
            border-radius: 100px 0 0 0;
        }
    </style>
</head>
<body>
    <div class="box1"></div><br>
    <div class="box2"></div><br>
    <div class="box3"></div>
</body>
</html>

4、圆角案例

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0%;
            padding: 0%;
        }
        input{
            outline: none;
        }
        div{
            width: 935px;
            height: 120px;
            border: 1px solid #dedede;
            margin: 10px auto;
            background: #ecebea;
            border-radius: 15px;
            box-shadow: 4px 11px 7px #bfbfbf,-4px 11px 7px #bfbfbf;
        }
        [type=text]{
            width: 683px;
            height: 86px;
            margin: 17px;
            border: 3px solid #cccccc;
            border-radius: 4px;
            font-size: 25px;
            text-indent: 11px;
        }
        [type=submit]{
            width: 200px;
            height: 83px;
            background: rgb(56, 189, 206);
            border-radius: 5px;
            border: 1px solid #5ca3b4;
            font-size: 23px;
            color: white;
        }
    </style>
</head>
<body>
    <form action="">
        <div>
            <input type="text" placeholder="Search for CSS3,HTML5,JQuery...">
            <input type="submit" value="GO">
        </div>
    </form>
    
</body>
</html>