CSS3
文章平均质量分 88
菁瑞优智
这个作者很懒,什么都没留下…
展开
-
重复线性渐变repeating-linear-gradient
上一篇CSS3 线性渐变(linear-gradient)讲了CSS3线性渐变,本文是它的姐妹篇——重复线性渐变repeating-linear-gradient。repeating-linear-gradient()函数创建一个由重复线性渐变组成的 。它类似于linear-gradient() 并采取相同的参数,但它重复的颜色停止无限的所有方向, 以覆盖其整个容器。函数的结果是 数据类型的一个对象, 它是一种特殊的 。一、语法结构repeating-linear-gradient( [ <原创 2021-06-17 15:10:41 · 6596 阅读 · 0 评论 -
CSS3 线性渐变(linear-gradient)
在CSS3出现之前,渐变效果只能通过图形软件(比如Photoshop)设计图片来实现,可拓展性差,还影响性能,而且还必须要会PS。如今通过CSS3可以很轻松的完成渐变效果。一、线性渐变的基础知识介绍先利用flash的渐变变形工具了解一下线性渐变的原理。设置了一个如图的线性渐变条,三个色彩,位置分别是0%,50%,100%, 默认左边第一个颜色是起始色,最后一个是终点色。渐变的效果最关键的是渐变线的长度和角度,如图:什么是渐变线?渐变线就是两条黑线中间那条垂直的红色线条。黑色线条代表了色彩的渐转载 2021-06-07 15:20:23 · 11841 阅读 · 0 评论 -
CSS3属性box-shadow轻松实现盒阴影效果
与text-shadow(文字阴影效果)的原理一样,只不过text-shadow是为文字做阴影,而box-shadow是为盒对象做阴影。这里的盒包括块状(block)、内联(inline)、内联块状对象(inline-block)。如果对盒对象不清楚的童鞋,可以先去学习下什么是盒一、box-shadow的语法结构w3c的官方文档,先看一下: CSS3 box-shadow 属性。box-shadow: h-shadow v-shadow blur spread color inset;h-sh转载 2021-06-03 14:54:47 · 5041 阅读 · 0 评论 -
CSS3新增text-shadow轻松实现文字阴影效果
在以前,如果想给文字加上特殊的样式,比如发光、阴影等效果,就必须用PS把文字保存为图片才能在网页上正常显示。而CSS3新增的text-shadow属性,可以轻松实现文字投影、发光、内阴影等很棒的立体效果,而且效果自然,不逊于PS制作出的效果。具体效果如图:一、text-shadow的语法按照惯例,先把w3c的官方文档看一遍: CSS3 text-shadow 属性text-shadow: none|h-shadow v-shadow blur color;none:无阴影,默认值。h-sh转载 2021-06-02 14:46:14 · 8672 阅读 · 0 评论 -
CSS3新增背景系列background相关属性
在CSS不支持多个背景写在一个标签里面的时候,如果需要多个背景,那么需要分开加标签,而且各个层级有时候还很容易搞混。现在,CSS3支持多背景写法了。本文详细讲解了CSS3多重背景这个新特性,真的是很强大。一、多重背景的用法background:url(),url(),……多个背景图片用逗号隔开,越靠前的图片层级越高。每一个背景图片的写法都和以前单个背景图片的写法是一样的。可以指定图片的平铺方式,位置等等。HTML:<div id="fruit"> </div>CSS转载 2021-05-31 14:36:24 · 649 阅读 · 0 评论 -
CSS中的颜色值以及rgba和opacity的区别
很多时候,网页的色彩总是看着怪怪的,这是为什么?CSS中设置颜色的方式有好几种,web前端开发者们往往都是用rgb三原色来搭配,或者直接用red/blue/yellow/gray等颜色值。这就导致了开发出来的前端页面完全脱离了UI设计稿,色彩差异明显,不是用户喜欢的色调。为了开发出用户喜欢的色调,强烈建议web前端们也要把自己的审美,特别是色彩审美提高一下。审美教育必须从娃娃抓起!1、基础颜色值,用单词可以表示。估计大家的英文也不太好,所以常常使用的也就是RGB里面的三原色值,或者加一个yello转载 2021-05-28 11:12:22 · 1145 阅读 · 0 评论 -
CSS3中新增单位rem、em、vh、vw等的用法
以前刚接触前端的时候,用来控制大小的单位大家都习惯用像素(px),但是随着时代的进步,响应式布局和跨平台设备的web应用已经成为主流,再使用像素单位来控制大小就有点捉襟见肘了。这时候,很多更为灵活的具有百分比性质的单位逐渐替代了像素单位。现如今,浏览器都允许用户重新设置文字的大小,如图:但是很多网页在body的样式上直接写死了文字大小,比如为14px或者16px,这样用户修改浏览器的字号是没法改变网页文字大小的,这对视力不好的人很不友好啊。如图,看看你有这种坏习惯吗?还设置文字居中,这个前端不合格!转载 2021-05-27 11:13:31 · 530 阅读 · 0 评论