CSS3边框和圆角 -- 笔记 - 图2review0508 after

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>after</title>
  6.     <style type="text/css">
  7.         header{
  8.             background: #abcdef;
  9.         }
  11.         header::after{
  12.             display: block;
  13.             content: "";
  14.             clear: both;
  15.         }
  17.         header > article{
  18.             float: left;
  19.             width: 40%;
  20.             height: 30px;
  21.             background: #f00;
  22.         }
  24.         header > aside{
  25.             float: right;
  26.             width: 40%;
  27.             height: 50px;
  28.             background: #ff0;
  29.         }
  31.         header > div{
  32.             /*clear: both;*/
  33.             /*clear: left;*/
  34.             /*clear: right;*/
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <header>
  40.         <article></article>
  41.         <aside></aside>
  42.         <!-- <div></div> -->
  43.     </header>
  44. </body>
  45. </html>

review0508 before

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>before</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 100px;
            border: 1px solid black;
        }

        div::before{
            content: "我在内容前面";
        }

        div::after{
            content: "我在内容后面";
        }
    </style>
</head>
<body>
    <div>
        对元素的第一行文本进行格式化
    </div>
</body>
</html>

review0508 border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border</title>
    <style type="text/css">
        div{
            width: 800px;
            height: 300px;
            border: 5px solid red;
            margin: 0 auto;
            /*如果设置百分比 div的高和宽一样 设置50%就是圆形*/
            border-radius: 30px 50px 70px 100px;
            /*四个值：第一个 - 左上角    第二个 - 右上角    第三个 - 右下角    第四个 - 左下角*/
            /*三个值：第一个 - 左上角    第二个 - 右上角和左下角    第三个 - 右下角*/
            /*两个值：第一个值 - 左上和右下       第二个值 - 右上和左下*/
            /*一个值：四个圆角相同*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

review0508 border-image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-image</title>
    <style type="text/css">
        div{
            width: 853px;
            height: 392px;
            border: 50px solid;
            border-image-source: url("border.jpg");
            /*border-iamge-source:none|image;*/
            border-image-slice: 10%;
            /*border-iamge-slice:number | % |fill;*/
            border-image-width: 10%;
            /*border-iamge-width:number | % |auto;*/
            /*border-image-outset: 2;*/
            /*border-iamge-outset:number|length;*/
            border-image-repeat: repeat;
            /*border-iamge-repeat: stretch | repeat | round | initial | inherit;*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

review0508 boxshadow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>boxshadow</title>
    <style type="text/css">
        div{
            width: 800px;
            height: 300px;
            background: #f00;
            margin: 0 auto;
            box-shadow: 50px 30px 0 0 yellow;
            /*box-shadow:h-shadow  v-shadow  blur  spread  color  inset;*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

review0508 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
        div{
            position: relative;
            width: 500px;
            height: 300px;
            border: 1px solid black;
            border-radius: 50%;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            line-height: 300px;
        }

        div::before,
        div::after{
            position: absolute;
            content: "";
            display: block;
            border: 1px solid black;
            border-radius: 50%;
        }

        div::before{
            width: 50px;
            height: 50px;
            bottom: -25px;
            right: 25px;
        }

        div::after{
            width: 20px;
            height: 20px;
            bottom: -50px;
            right: 0px;
        }
    </style>
</head>
<body>
    <div>大家好，欢迎来到渡课网！</div>
</body>
</html>

review0508 firstline

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style type="text/css">
        div{
            width: 500px;
            margin: 0 auto;
        }

        .para:first-line{
            color: red;
            font-weight: bold;
        }

        .para:first-letter{
            color: green;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div class="para">
        对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化
    </div>
</body>
</html>

review0508 selection

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>selection</title>
    <style type="text/css">
        div::selection{
            background: red;
            color: yellow;
        }
    </style>
</head>
<body>
    <div>
        对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化对元素的第一行文本进行格式化
    </div>
</body>
</html>