zoukankan      html  css  js  c++  java

  • css3 圆角、边框、文字阴影、盒阴影

    1.rgba颜色值（红，绿，蓝，透明）

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>rgba</title>
 6     <style type="text/css">
 7     div{
 8         width: 200px;
 9         height: 200px;
10         background: rgba(0,0,0,0.2);
11         position: absolute;
12     }
13     </style>
14 </head>
15 <body>
16 <div></div>
17 的所发生的咖啡机
18 </body>
19 </html>

    2.圆角border-radius ，border-radius有8个参数，前面4个是横坐标，后面4个是纵坐标，x1,x2,x3,x4/y1,y2,y3,y4;x1是左上角横坐标，x2是右上角横坐标，x3是右下角横坐标，x4是左下角横坐标；y1,y2,y3,y4同理。

    2.1利用border-radius绘制圆形

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>圆形</title>
 6     <style type="text/css">
 7     div{
 8         width: 200px;
 9         height: 200px;
10         background: #ccc;
11         border-radius: 100px; 
12     }
13     </style>
14 </head>
15 <body>
16 <div></div>
17 </body>
18 </html>

    2.2椭圆

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>椭圆</title>
 6     <style type="text/css">
 7     div{
 8         width: 200px;
 9         height: 100px;
10         border-radius: 100px/50px; 
11         /*border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;这个是完整写法*/
12         background: #ccc;/*缩写*/
13     }
14     </style>
15 </head>
16 <body>
17 <div></div>
18 </body>
19 </html>

    2.3 弧形

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>弧形</title>
 6     <style type="text/css">
 7     div{
 8         width: 0;
 9         border-bottom: 100px solid #ccc;
10         border-top: 100px solid #ccc;
11         border-left: 100px solid #ccc;
12         border-right: 100px solid transparent;
13         border-radius: 100px;
14     }
15     </style>
16 </head>
17 <body>
18 <div></div>
19 </body>
20 </html>

    2.4其他

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>其他</title>
 6     <style type="text/css">
 7     div{
 8         width: 200px;
 9         height: 200px;
10         border-top-left-radius: 50px; 
11         background: #ccc;
12     }
13     </style>
14 </head>
15 <body>
16 <div></div>
17 </body>
18 </html>

    3、文字阴影 text-shadow:x偏移 y偏移 模糊度 阴影颜色；

    3.1、模糊字（添加文字阴影，设置文字的颜色透明，隐藏文字，只留阴影）

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>模糊字</title>
 6     <style type="text/css">
 7     div{
 8         text-shadow: 0 0 10px yellow;
 9         color: rgba(0,0,0,0);
10         font-size: 50px;
11         font-weight: bold;
12     }
13     </style>
14 </head>
15 <body>
16 <div>的所发生的咖啡机</div>
17 </body>
18 </html>

    3.2、发光字(从文字到外面的模糊度越来越模糊，颜色也跟着改变)

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>发光字</title>
 6     <style type="text/css">
 7     body{
 8         background: #000;
 9     }
10     div{
11           text-shadow: 0 0 5px #fff,0 0 15px #fff,0 0 30px #f00,0 0 50px #f00;
12          font-size: 50px;
13          font-weight: bold;
14          color: #fff;
15     }
16     </style>
17 </head>
18 <body>
19 <div>的所发生的咖啡机</div>
20 </body>
21 </html>

    3.3浮雕

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>浮雕</title>
 6     <style type="text/css">
 7     body{
 8         background: #ccc;
 9     }
10     div{
11          text-shadow: -1px -1px 0 #fff,1px 1px 0 #333;
12          font-size: 50px;
13          font-weight: bold;
14          color: #fff;
15     }
16     </style>
17 </head>
18 <body>
19 <div>的所发生的咖啡机</div>
20 </body>
21 </html>

    3.4文字内陷（内阴影）

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>文字内阴影</title>
 6     <style type="text/css">
 7     div{
 8     background-color: #444;
 9     font-size: 50px;
10     font-weight: bold;
11     text-shadow: 1px 1px 0 #999, 0 0 0 #000;
12     color: rgba(0, 0, 0, 0.5);
13     }
14     </style>
15 </head>
16 <body>
17 <div>
18      CSS3 內阴影文字效果
19 </div>
20 </body>
21 <html>

    3.5描边

     1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>文字描边</title>
 6     <style type="text/css">
 7     div{
 8     font-size: 50px;
 9     font-weight: bold;
10      color: #ccc;
11   text-shadow: 1px 1px 0 #f00,-1px -1px 0 #f00; 
12     }
13     </style>
14 </head>
15 <body>
16 <div>
17      CSS3 文字描边
18 </div>
19 </body>
20 <html>

    3.6 3D文字

     1  <!doctype html>
 2  <html>
 3  <head>
 4      <meta charset="utf-8"/>
 5      <title>立体文字</title>
 6      <style type="text/css">
 7      body{
 8         background: #000;
 9     }
10      div{
11          font-size: 50px;
12         font-weight: bold;
13        color: #fff;
14   text-shadow:1px 1px 0 rgba(255,255,255,0.7),2px 2px 0 rgba(255,255,255,0.7),3px 3px 0 rgba(255,255,255,0.7),4px 4px 0 rgba(255,255,255,0.7),5px 5px 0 rgba(255,255,255,0.7),6px 6px 0 rgba(255,255,255,0.7);
15      }
16      </style>
17  </head>
18  <body>
19  <div>
20       CSS3 立体文字
21  </div>
22  </body>
23  <html>

    3.7 镂空

     1  <!doctype html>
 2  <html>
 3  <head>
 4      <meta charset="utf-8"/>
 5      <title>立体文字</title>
 6      <style type="text/css">
 7      body{
 8         background: #000;
 9     }
10      div{
11          font-size: 50px;
12         font-weight: bold;
13       color: #000;
14   text-shadow: 1px 1px 0 #fff,-1px -1px 0 #fff; 
15      }
16      </style>
17  </head>
18  <body>
19  <div>
20       CSS3 镂空
21  </div>
22  </body>
23  <html>

    3.8火焰文字

     1  <!doctype html>
 2  <html>
 3  <head>
 4      <meta charset="utf-8"/>
 5      <title>火焰文字</title>
 6      <style type="text/css">
 7      
 8 body{background:#000;color:#fff;}
 9 div{
10     font-size: 100px;
11     line-height: 200px;
12     font-weight: bold;
13     text-shadow:0 0 5px #fff,0 0 20px #fefcc9,10px -10px 30px #feec85,-20px -20px 40px #ffae34,20px -40px 50px #ec760c,-20px -60px 60px #cd4606,0 -80px 70px #973716,10px -90px 80px #451b0e;
14 }
15 </style>
16  </head>
17  <body>
18  <div>
19       CSS3 火焰文字
20  </div>
21  </body>
22  <html>

    4.盒阴影（box-shadow）用法和text-shadow差不多

    5.边框背景（border-image）

    语法：border-image:url() 10% 10% 10% 10% stretch; 可以使用百分比，也可以使用像素，但是不用带px

    　　数值相同可以简写border-image:url() 10% stretch; 第三个参数可以是 stretch拉伸，repeat重复，round也是重复，但比repeat好的

    <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框背景</title>
<style type="text/css">
div{
    height: 400px;
    width: 380px;
    border-width: 50px;
    border-image: url(1.png) 166 round;
    background: #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
  • 相关阅读:
    负载均衡软件LVS 三种实现模式对比
    论文学习笔记:High-level pattern-based classification via tourist
    论文学习笔记:A Network-Based High Level Data Classification
    第四章--度相关性和社团结构(复杂网络学习笔记)
    第三章--网络基本拓扑性质(复杂网络学习笔记)
    第二章--网络与图(复杂网络学习笔记)
    神经网咯基础-deeplearning.ai【笔记】
    前端Jquery-Ajax跨域请求，并携带cookie
    Django中解决跨域请求问题
    1- 基本概念(复杂网络学习笔记)
  • 原文地址：https://www.cnblogs.com/night2013/p/3623241.html
Copyright © 2011-2022 走看看