zoukankan      html  css  js  c++  java
  • 【CSS3】渐变

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8">
     5     <title></title>
     6     <link rel="stylesheet" type="text/css" href="style.css">
     7 </head>
     8 <body>
     9     <div id="div1"></div>
    10     <div id="div2"></div>
    11 </body>
    12 </html>
     1 div{
     2     width: 300px;
     3     height: 200px;
     4     border:solid;
     5 }
     6 #div1{
     7     /*background-image: linear-gradient(red,blue);*//*默认从上到下*/
     8     /*background-image: linear-gradient(0deg,red,blue);*//*0deg从下到上*/
     9     /*background-image: linear-gradient(to right,red,blue);*/
    10     /*background-image: linear-gradient(to left,red,blue);*/
    11     /*background-image: linear-gradient(to right bottom,red,blue);*/
    12     /*background-image: linear-gradient(to right,red,green,blue);*/
    13     /*background-image: linear-gradient(to right top,red 25%,green 50%,orange 75%,blue 100%);*/
    14     /*background-image: linear-gradient(to right top,red 0px,green 100px,orange 200px,blue 300px);*/
    15     background-image: repeating-linear-gradient(to right top,red 0px,green 10px,orange 20px,blue 30px);/*30px之后开始重复渐变设置*/
    16 }
    17 #div2{
    18     /*background-image: radial-gradient(red,blue);*//*默认从里到外*/
    19     /*background-image: radial-gradient(circle,red,green,blue);*//*默认ellipse椭圆,可设circle圆*/
    20     /*background-image: radial-gradient(circle at right,red,green,blue);*/
    21     /*background-image: radial-gradient(circle at left bottom,red,green,blue);*/
    22     /*background-image: radial-gradient(circle 50px,red,green,blue);*//*50px为半径*/
    23     /*background-image: radial-gradient(circle farthest-corner,red,green,blue);*//*半径除了可以像素如50px,还可用关键字closest-side圆心到距离最近的边、farthest-side圆心到距离最远的边、closest-corner圆心到距离最近的角、farthest-corner圆心到距离最远的角*/
    24     background-image: repeating-radial-gradient(circle closest-side,red,green,blue);
    25 }

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8">
     5     <title></title>
     6     <link rel="stylesheet" type="text/css" href="style.css">
     7 </head>
     8 <body>
     9     <input type="button" value="渐变按钮" class="b1">
    10     <input type="button" value="渐变按钮" class="b1 b2">
    11     <input type="button" value="渐变按钮" class="b1 b2 b3">
    12 </body>
    13 </html>
     1 .b1{
     2     padding: 5px 10px;
     3     font-size: 15px;
     4     text-shadow: 3px 3px 3px  rgba(0,0,0,0.6);
     5     background-image: linear-gradient(to left bottom,pink,green);
     6 }
     7 .b2{
     8     border-radius: 10px;
     9 }
    10 .b3{
    11     border-radius: 1em;
    12 }
    13 .b1:hover{
    14     background-image: linear-gradient(to right top,pink,green);
    15 }
  • 相关阅读:
    ACM/ICPC 之 中国剩余定理+容斥原理(HDU5768)
    ACM/ICPC 之 三维计算几何+暴力枚举+判重(HDU5839)
    ACM/ICPC 之 有流量上下界的网络流-Dinic(可做模板)(POJ2396)
    ACM/ICPC 之 Dinic+枚举最小割点集(可做模板)(POJ1815)
    ACM/ICPC 之 DP解有规律的最短路问题(POJ3377)
    ACM/ICPC 之 DFS+SPFA-贪心+最短路(POJ2679)
    ACM/ICPC 之 靠墙走-DFS+BFS(POJ3083)
    maven的setting.xml配置文件详解(中文)
    高性能、高可用的分布式架构体系(有启发的)
    各种数据库再spring中的配置(转载)
  • 原文地址:https://www.cnblogs.com/xiongjiawei/p/6789043.html
Copyright © 2011-2022 走看看