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 }
  • 相关阅读:
    css水平垂直居中问题
    关系型数据库四大特性
    C++读取csv文件&&收获到的知识
    恒生面试记录
    SQL数据库操作命令
    安防产品知识记录
    学会求助(带着自己的理解去和别人探讨解决方案),处理问题责任清晰,如果不清楚可以问主管.
    一个简单又不简单的socket例子
    C++面试题总结
    大华电话面试
  • 原文地址:https://www.cnblogs.com/xiongjiawei/p/6789043.html
Copyright © 2011-2022 走看看