zoukankan      html  css  js  c++  java
  • 圆角渐变边框实现

    这里涉及到了圆角和渐变色两个属性。

    1.圆角:border-radius

    border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。

    2.渐变:linear-gradient

    linear-gradient() 函数用于创建一个线性渐变的 "图像"。

    为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。

    所以通常情况下认为的最简便的方法是:直接在具有圆角边框的属性下使用border-image来控制渐变,但这样是错误的。

    有过经验的朋友会发现border-radius会出现属性失效的情况,因为两个属性看似是控制两个效果,但实际操作却都是操作了border边角。

    所以目前大众化且普遍的做法如下:

    采用遮罩显示的方式,渐变为底色背景,内层填充,未被遮挡的部分自然就显示为圆角边框。

    具体操作方式有多种如:

    (1)两个div控制,一个渐变背景板一个内层填充

    (2)一个div通过after伪类元素添加渐变背景板

    (3)利用div的盒模型属性content-box, padding-box使用渐变和填充

    以上三个方法均可实现圆角渐变边框,目前的普遍做法也是如此。

    但是以上方式有个致命的缺点,由于都是背景填充和遮罩,所以无法做到圆角渐变边框且背景透明

    想要实现圆角渐变边框且背景透明,纯css实现比较困难,博主没写出效果极佳的列子不做代码展示。

    希望以上观点对阅读者有部分帮助,有纯css实现圆角渐变边框且背景透明的例子我会第一时间补全。

  • 相关阅读:
    [noip2011d2t2]聪明的质检员 二分+前缀和优化
    [noip2016d2t2]蚯蚓
    KMP
    杨辉三角(二项式定理)&&组合数 【noip 2011/2016 d2t1】
    bzoj1615 [Usaco2008 Mar]The Loathesome Hay Baler麻烦的干草打包机
    [noip2015 pjt3]求和
    [周记]8.28~9.3
    [noip2011 d1t3] Mayan游戏
    react基础用法二(组件渲染)
    react基础用法一(在标签中渲染元素)
  • 原文地址:https://www.cnblogs.com/zhaozhou/p/11633754.html
Copyright © 2011-2022 走看看