1.利用css如何制作一个半圆?(思路:对样式border-radius以及宽高的控制) 页面部分 效果: 2.即当a标签内有内容时,无法再对a标签进行宽高的控制,但又不想引入图片作为背景,此时用css3渐变属性linear-gradient(思路:一个圆,将自己不需要显示的半圆用白色背景) 效果展 ...
分类:
Web程序 时间:
2017-08-06 13:59:52
阅读次数:
1904
.gradient { background: rgba(236,101,33,1); background: -moz-linear-gradient(90deg,rgba(236,101,33,1) 0,rgba(212,132,91,1) 100%); background: -webkit-... ...
分类:
其他好文 时间:
2017-08-02 16:26:49
阅读次数:
166
1 div{ 2 background: pink; /*不支持渐变色的浏览器*/ 3 background: -webkit-gradient(linear,0 0,0 100%,from(red) ,to(blue)); 4 background: -moz-linear-gradient(to ...
分类:
其他好文 时间:
2017-06-26 19:09:08
阅读次数:
117
感谢 LeaVerou 大神,让我们可以提前使用上这么美妙的属性。 conic-gradient 是个什么?说到 conic-gradient ,就不得不提的它的另外两个兄弟: linear-gradient : 线性渐变 radial-gradient : 径向渐变 说这两个应该还是有很多人了解并 ...
分类:
其他好文 时间:
2017-06-26 12:51:24
阅读次数:
523
css3定义了两种类型的渐变,即线性渐变和径向渐变。这里我要说的是线性渐变。 为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。 语法:background: linear-gradient(direction, ...
分类:
Web程序 时间:
2017-06-12 18:54:10
阅读次数:
227
将角切掉也是一种流行的设计风格 传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果 有了CSS3,我们完全可以使用新技术来实现 第一种方案: CSS渐变 需求一: 一个矩形需要切掉一个45°角 使用线性渐变来实现 background: #58a linear-gradient ...
分类:
Web程序 时间:
2017-05-29 21:43:35
阅读次数:
169
css3的gradient分为两种:线性渐变(linear)和径向渐变(radial)。 一、线性渐变linear-gradient 1、介绍 linear-gradient([设置方向],[设置开始颜色],[设置多种过度颜色],[设置结束颜色]) 参数: 第一个参数:指定渐变方向,可以用“角度”的 ...
分类:
Web程序 时间:
2017-05-26 23:26:06
阅读次数:
265
/*窗口背景*/ .window { background-color: #fff; background: -webkit-linear-gradient(top,#EFF5FF 0,#fff 20%); background: -moz-linear-gradient(top,#EFF5FF 0 ...
分类:
其他好文 时间:
2017-05-23 15:48:47
阅读次数:
191
CSS3:1.文字阴影效果text-shadow:red 10px 10px 1px;2.背景颜色渐变background:linear-gradient(to top,green,red,pink)3.圆角效果:border-radius可以用来画圆,半圆4.盒子阴影box-shadow: ins ...
分类:
Web程序 时间:
2017-05-20 12:25:22
阅读次数:
234
以webkit内核浏览器为例,语法:div{
width:200px;
height:200px;
background:-webkit-linear-gradient(left,#F39,#09C);
}如图:参数:-webkit-linear-gradient是webkit引擎对渐变的实现参数。第一个参数控制渐变方向,比如left(由左向右)right(由右向左)。第二个和第三个..
分类:
Web程序 时间:
2017-05-18 20:26:21
阅读次数:
198