25.边框圆角渐变

作者: 小荣袁 | 来源:发表于2019-03-19 23:00 被阅读0次

25.边框圆角渐变
iOS 设置渐变色圆角边框
给视图添加渐变色、圆角、阴影、线框、虚线框
Flutter之Decoration（边框、圆角、阴影、形状、渐
Flutter的Container和Decoration
Flutter Decoration背景设定（边框、圆角、阴影、
Flutter Decoration背景设定（边框、圆角、阴影、
CSS边框圆角--跟着李南江学编程
CSS部分
Flutter-Border

边框

什么是边框圆角?
将直角的边框变为圆角的边框
边框圆角的格式?
border-radius: 左上右上右下左下;
将正方形变为圆形的技巧
border-radius: 50%;
系统如何绘制圆角?
首先根据指定的值找到圆心
按照指定的值作为半径绘制圆弧

注意点

当省略了某一个角度的值之后,系统会自动参考对角的值
当只设置了一个值的时候,其它三个角都会参考这个值
当边框圆角的值 > 边框宽度的时候, 外边框和内边框都会变成圆;当边框圆角的值 <= 边框宽度的时候, 外边框是圆角, 内边框是直角

利用边框来绘制半圆和椭圆

绘制半圆(可以通过border-xxx-xx-radius的方式单独设置某一个角的值)

 /*可以通过border-xxx-xx-radius的方式单独设置某一个角的值
border-xxx-xx-radius接收两个参数, 第一个表示水平方向, 第二个表示垂直方向
border-xxx-xx-radius如果只传递了一个参数, 那么出自方向和水平方向的值一样
*/
border-top-left-radius: 100px;
border-top-right-radius: 100px;

绘制椭圆(绘制椭圆设置水平方向为宽度的一半, 设置垂直方向为高度的一半)

/*绘制椭圆设置水平方向为宽度的一半, 设置垂直方向为高度的一半*/
border-top-left-radius: 200px 100px;
border-top-right-radius: 200px 100px;
border-bottom-left-radius: 200px 100px;
border-bottom-right-radius: 200px 100px;

边框案例,绘制太极八卦图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>121-绘制太极八卦图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .all{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            box-sizing: border-box;
            margin: 200px auto;
            position: relative;
        }
        .top{
            width: 400px;
            height: 200px;
            background: red;
            border-top-left-radius: 200px 200px;
            border-top-right-radius: 200px 200px;
        }
        .bottom{
            width: 400px;
            height: 200px;
            background: skyblue;
            border-bottom-left-radius: 200px 200px;
            border-bottom-right-radius: 200px 200px;
        }
        .left{
            width: 200px;
            height: 200px;
            background: red;
            border: 80px solid skyblue;
            box-sizing: border-box;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 100px;
        }
        .right{
            width: 200px;
            height: 200px;
            background: skyblue;
            border: 80px solid red;
            box-sizing: border-box;
            border-radius: 50%;
            position: absolute;
            right: 0;
            top: 100px;
        }
    </style>
</head>
<body>
<div class="all">
    <!--上面的半圆-->
    <div class="top"></div>
    <!--下面的半圆-->
    <div class="bottom"></div>
    <!--左边的小圆-->
    <div class="left"></div>
    <!--右边的小圆-->
    <div class="right"></div>
</div>
</body>
</html>

绘制跳动的心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>122-绘制跳动的心</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .all{
            width: 450px;
            height: 400px;
            /*border: 1px solid #000;*/
            box-sizing: border-box;
            margin: 200px auto;
            position: relative;
        }
        .left, .right{
            width: 250px;
            height: 250px;
            background: red;
            border-radius: 50%;
            position: absolute;
            /*left: 0;*/
            top: 0;
            box-shadow: 0 0 40px red;
        }
        .left{
            left: 0;
        }
        .right{
            /*width: 250px;*/
            /*height: 250px;*/
            /*background: red;*/
            /*border-radius: 50%;*/
            /*position: absolute;*/
            right: 0;
            /*top: 0;*/
            /*box-shadow: 0 0 40px red;*/
        }
        .bottom{
            width: 250px;
            height: 250px;
            background: red;
            position: absolute;
            bottom: 50px;
            left: 50%;
            /*margin-left: -125px;*/
            /*技巧: 在企业开发中推荐使用如下的方式让元素居中
            水平居中: left:50%; transform: translateX(-50%);
            垂直居中: top:50%; transform: translateY(-50%);
            */
            transform: translateX(-50%) rotateZ(45deg);
            box-shadow: 0 0 40px red;
        }
        .all{
            animation: sport 1s linear 0s infinite normal;
        }
        @keyframes sport {
            0%{
                transform: scale(1);
            }
            50%{
                transform: scale(1.1);
            }
            100%{
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
<div class="all">
    <!--左边的小圆-->
    <div class="left"></div>
    <!--右边的小圆-->
    <div class="right"></div>
    <!--底部的尖尖-->
    <div class="bottom"></div>
</div>
</body>
</html>

边框图片

/*注意点:
如果只通过source指定了哪一张图片作为边框的图片, 默认情况下会将图片放到边框的四个顶点
 如果设置了边框图片, 那么就不会显示边框颜色, 边框图片的优先级高于边框颜色*/
border-image-source: url("images/border.jpg");
 /*告诉浏览器如何对指定的边框图片进行切割
注意点: 不带单位
*/
border-image-slice: 70 70 70 70;
/*告诉浏览器边框图片显示的宽度, 并不是指定边框的宽度
注意点: 如果通过border-image-width指定了边框图片的宽度, 那么默认的边框宽度就会失效*/
/*border-image-width: 10px;*/

/*告诉浏览器除了边框图片四个角以外的图片如何填充, 默认是拉伸*/

border-image-repeat: stretch;
border-image-repeat: repeat
border-image-repeat: round;

vertical-align

什么是vertical-align?
设置元素的垂直对齐方式。
vertical-align注意点:
text-align是设置给需要对齐元素的父元素
vertical-align是设置给需要对齐的那个元素本身
vertical-align只对行内元素有效

渐变

线性渐变

格式

/*默认情况下会从上至下的渐变*/
background: linear-gradient(red, green);
background: linear-gradient(to top ,red, green);
background: linear-gradient(to right ,red, green);
background: linear-gradient(to left ,red, green);
background: linear-gradient(to top right ,red, green);

注意点

至少需要传递2个颜色, 至多没有上限
默认情况下自动回自动计算纯色和渐变色的范围, 但是我们也可以手动指定,手动指定的格式: 颜色范围
只有第一个颜色后面的范围是指定纯色的范围, 后面的都是指定渐变的范围

径向渐变

和线性渐变的区别

线性渐变: 默认从上至下;径向渐变: 默认从中心点向四周扩散

background: radial-gradient(red, green);

线性渐变: 可以通过to 关键字的方式修改渐变的方向
径向渐变: 可以通过at 关键字的方式修改开始渐变的位置

background: radial-gradient(at top left ,red, green);

线性渐变: 可以通过to deg的方式修改渐变的方向
径向渐变: 可以通过at 位置位置的方式修改开始渐变的位置

background: radial-gradient(at 200px 100px ,red, green);

线性渐变可以指定纯色和渐变的范围;径向渐变也可以指定扩散的范围

 background: radial-gradient(100px, red, green);

注意点

如果需要同时指定扩散的位置和扩散的范围, 那么范围必须写到at前面

background: radial-gradient(100px at 200px 100px ,red, green);

25.边框圆角渐变
边框什么是边框圆角?将直角的边框变为圆角的边框边框圆角的格式?border-radius: 左上右上右下 ...
iOS 设置渐变色圆角边框
iOS 设置渐变色圆角边框 *如下需求图,使用背景图片很难达到很好的效果 *就需要使用代码来绘制渐变色圆角边框
给视图添加渐变色、圆角、阴影、线框、虚线框
1.渐变色 2.圆角和边框（虚线边框）添加 3.阴影及（光栅化）
Flutter之Decoration（边框、圆角、阴影、形状、渐
1简介 BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像 ShapeDecoration:实...
Flutter的Container和Decoration
Container的使用 Decoration的使用背景图阴影和渐变边框和圆角
Flutter Decoration背景设定（边框、圆角、阴影、
1 继续关系： BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像 ShapeDecorati...
Flutter Decoration背景设定（边框、圆角、阴影、
1 继续关系： BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像 ShapeDecorati...
CSS边框圆角--跟着李南江学编程
1.什么是边框圆角？就是把矩形边框变成圆角边框，就叫做边框圆角。 2.设置边框圆角的格式 2.1 border-...
CSS部分
CSS3新增选择器边框、圆角、阴影border&radius 渐变gradient 转换transform 过...
Flutter-Border
边框（Border）单侧边框全部边框圆角（borderRadius）全部圆角单侧圆角阴影（BoxSha...