Heim > Web-Frontend > HTML-Tutorial > Css3实现线性渐变效果_html/css_WEB-ITnose

Css3实现线性渐变效果_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:52:40
Original
1050 Leute haben es durchsucht

-webkit-gradient(linear,0% 0%, 0% 100%, from(#4998FF), to(#3B90FF), color-stop(0.5,#0A0FA6))

  • webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法:background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );
  • -webkit-gradient是background的一个属性值;
  • webkit内核的Linear Gradients (线性渐变) 第一组参数type(类型)为 linear;
  • 第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%,当x1,x2,y1,y2取值为极值的时候,x1和x2可以取值left(或0%)或right(或100%),,y1和y2可以取值top(或0%)或bottom(或100%);
  • 当x1等于x2,y1不等于y2,实现垂直渐变,调整y1,y2的值可以调整渐变半径大小;
  • 当y1等于y2,x1不等于x2,实现水平渐变,调整x1,x2的值可以调整渐变半径大小;
  • 当y1不等于y2,x1不等于x2,实现角度渐变,当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变;
  • 当x1等于x2,y1等于y2,实现没有渐变,取from色,即“ from(颜色值) ”;
  • 实现垂直渐变和水平渐变渐变时,x1和x2可以最简单的取值是left(或0%)或right(或100%),y1和y2可以最简单的取值是top(或0%)或bottom(或100%);
  • from(开始颜色值),to(结束颜色值)是两个渐变颜色值;
  • [color-stop(偏移量,停靠颜色值),...]:可以使用多个color-stop,如果渐变只有2个颜色,那么可以不使用该参数;偏移量必须为小数,如果偏移量>=1,那么该color-stop相当于无效;
  • 设计渐变效果工具地址:http://www.css88.com/tool/css3Preview/Linear-Gradients.html

     

     

     


     

     

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage