css3 凹角,CSS3渐变

矫情吗；* 2022-09-02 14:55 239阅读 0赞

css3的渐变还是比较强大的，制作一些常规背景图，如棋盘，房屋地板非常漂亮的，直接上图。

![7808a2281481][]

地板.png

![7808a2281481][]

竹子.png

![7808a2281481][]

桌布.png

![7808a2281481][]

星盘.png

div\{

margin: 0 auto;

width: 600px;

height: 600px;

/\*

1.0或者0%起到截断的作用

2.颜色重叠的核心：第一个渐变需要留出部分(transparent)空白给第二个渐变使用，否则第二个渐变不会有任何的颜色，该案例中transparent 0%, transparent 75%, 其实就是留给第二个渐变使用的。

3.使用角度旋转就可以得到想要的效果

\*/

/\* background-image: linear-gradient(90deg, red 0%, red 50%, transparent 0%, transparent 100%),

linear-gradient(180deg, white 50%, black 100%);

background-size: 25px 25px;\*/

/\*样式调整，做棋盘形状\*/

/\* background-image: linear-gradient(90deg, \#000 0%, \#000 25%, transparent 0%, transparent 75%, \#000 0%, \#000 100%),

linear-gradient(180deg, \#000 0%, \#000 25%, transparent 0%, transparent 75%, \#000 0%, \#000 100%);

background-size: 25px 25px;\*/

/\*缩写并变换角度\*/

/\* background-image: linear-gradient(135deg, \#000 25%, transparent 0%, transparent 75%, \#000 0%),

linear-gradient(225deg, \#000 25%, transparent 0%, transparent 75%, \#000 0%);

background-size: 25px 25px;\*/

/\*拓展--地板\*/

background-image: linear-gradient(135deg, gray 0%, \#000 25%, transparent 0%, transparent 75%, \#000 0%, gray 100%),

linear-gradient(225deg, gray 0%, \#000 25%, transparent 0%, transparent 75%, \#000 0%, gray 100%);

background-size: 50px 50px;

/\*拓展--竹子\*/

background-image: linear-gradient(90deg, \#fff 20%, transparent 0%, transparent 80%, \#fff 0%),

linear-gradient(180deg, rgb(37,111,8) 60%, rgb(199,224,136) 96%, rgb(225,225,130) 0%);

background-size: 25px 50px;

/\*拓展--桌布\*/

background-image: linear-gradient(90deg, \#fff 2%, transparent 0%, transparent 98%, \#fff 0%),

linear-gradient(180deg, rgb(93,132,168) 96%, white 0%, white 100%);

background-size: 25px 25px;

/\*拓展--星盘\*/

background-image: radial-gradient(\#000 8%, transparent 92%, \#000 0%);

background-size: 25px 25px;

渐变介绍

渐变主要有四种：

linear-gradient()

repeating-linear-gradient()

radial-gradient()

repeating-radial-gradient()

以线性渐变为例子：linear-gradient()

接受参数：(direction, color-stop1, color-stop2, ...)

direction:可以接受left、right、bottom、top、left top、top right等，也接受deg角度，角度范围更大

![math?formula=%5Ccolor%7Bred%7D%7B%E6%9C%AC%E4%BA%BA%E6%8E%A8%E8%8D%90%7D][math_formula_5Ccolor_7Bred_7D_7B_E6_9C_AC_E4_BA_BA_E6_8E_A8_E8_8D_90_7D]；

color-stop:\[颜色值\[, value\]\]，value即截至位置，可以是px或者百分比。

径向渐变

background: -webkit-radial-gradient(||, || , start-color, ..., last-color);

shape: circle或者ellipse；

size:closest-side、farthest-side、closest-corner、farthest-corner

position:百分比和px、例如100% 0%或者100px 50px；

angle: 45deg

start-color:至少两种颜色：可以是颜色值，也可以定结束为值， 例如：red 10% blue 30%

制作圆角示例

div\{

margin: 0 auto;

width: 200px;

height: 200px;

border: 1px solid gray;

background: -webkit-radial-gradient(100% 0%, circle, transparent 200px, orange 200px )

![7808a2281481][]

image.png

制作凹角(浏览器标签)

.container>div:nth-of-type(1)\{

width: 300px;

height: 100px;

background: red;

margin: 0 auto;

border-radius: 10px 10px 0 0;

position: relative;

.container>div:nth-of-type(1)::before\{

content: "";

position: absolute;

bottom: 0;left: -10px;

width: 10px;

height: 10px;

background: -webkit-radial-gradient(0% 0%, circle, transparent 10px, red 10px );

.container>div:nth-of-type(1)::after\{

content: "";

position: absolute;

bottom: 0;right: -10px;

width: 10px;

height: 10px;

background: -webkit-radial-gradient(100% 0%, circle, transparent 10px, red 10px );

.container>div:nth-of-type(2)\{

width: 100%;

height: 100px;

background: red;

// 元素

![7808a2281481][]

image.png

[7808a2281481]: /images/20220829/547e22703ec546ec90a6d605eff3a610.png
[math_formula_5Ccolor_7Bred_7D_7B_E6_9C_AC_E4_BA_BA_E6_8E_A8_E8_8D_90_7D]: https://math.jianshu.com/math?formula=%5Ccolor%7Bred%7D%7B%E6%9C%AC%E4%BA%BA%E6%8E%A8%E8%8D%90%7D

css3 凹角,CSS3渐变

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 css3 gradients渐变

相关 css3透明度渐变

相关 css3 凹角,CSS3渐变

相关 CSS3渐变Gradients

相关 CSS3的渐变

相关详解CSS3渐变

相关 CSS3背景，渐变

相关 css实现div内凹角样式

相关 css3渐变

相关 css3颜色渐变：css3如何实现背景颜色渐变？