在CSS3中常用的几种颜色渐变模式
现在html5 css3已经越来越流行，用CSS3实现p渐变已经不是什么难事了，这篇文章给大家整理了现在常用的三种颜色渐变模式，包括线性渐变、径向渐变和重复的线性渐变，文中通过示例代码介绍的很详细，有需要的朋友们可以参考借鉴，下面来一起看看吧。一、线性渐变：linear-gradient语法： = linear-gradient([ [ | to [, ]+) = [left | right] || [top | bottom] = [ |]?下述值用来表示渐变的方向，可以使用角度或者关键字来设置： ：用角度值指定渐变的方向（或角度）。 to left：设置渐变为从右到左。相当于: 270deg to right：设置渐变从左到右。相当于: 90deg to top：设置渐变从下到上。相当于: 0deg to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。 用于指定渐变的起止颜色： ：指定颜色。 ：用长度值指定起止色位置。不允许负值 ：用百分比指定起止色位置。示例：p { width: 200px; height: 100px; margin: 10px 5px; border: 1px solid #ddd000; } #LinearStartToEnd { float:left; background: linear-gradient(#ff0000, #00ff00); } #LinearPercentage { float:left; background: linear-gradient(#0000ff, #ff0000 52%, #00ff00); } #LinearAnglePercentage { float:left; background: linear-gradient(90deg, #ff0000 20%, #00ff00 50%, #000000 80%); } #LinearAngle { float:left; background: linear-gradient(30deg, #ffff00 30%, #ff0000, #00ff00); } #LinearTopRight { float:left; background: linear-gradient(to right top, #00ff00, #ff0000 50%, #0000ff); }二、径向渐变：radial-gradient语法： = [ ① | ① | left | center① | right ]? [ ② | ② | top | center② | bottom ]? = circle | ellipse = |[||] = closest-side | closest-corner | farthest-side | farthest-corner = = [ | ]{2} = | = radial-gradient([ [ || ] [ at ]? , | at , ]?[[ , ]]+) 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center ①：用长度值指定径向渐变圆心的横坐标值。可以为负值。 ①：用百分比指定径向渐变圆心的横坐标值。可以为负值。 ②：用长度值指定径向渐变圆心的纵坐标值。可以为负值。 ②：用百分比指定径向渐变圆心的纵坐标值。可以为负值。 center①：设置中间为径向渐变圆心的横坐标值。 center②：设置中间为径向渐变圆心的纵坐标值。 left：设置左边为径向渐变圆心的横坐标值。 right：设置右边为径向渐变圆心的横坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。 确定圆的类型 circle：指定圆形的径向渐变 ellipse：指定椭圆形的径向渐变。 circle | ellipse 都接受该值作为 size。 closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边。 closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角。 farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边。 farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角。 circle 接受该值作为 size。 ：用长度值指定正圆径向渐变的半径长度。不允许负值。 ellipse 接受该值作为 size。 ：用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。 ：用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。示例：#RadialCenterCircle { float:left; background: radial-gradient(circle at center, #ff0000, #ffff00, #00ffff); } #RadialClosestSide { float:left; background: radial-gradient(circle closest-side, #ff0000, #00ff00, #ffff00); } #RadialFarthestSide { float:left; background: radial-gradient(farthest-side, #ff0000 20%, #ffff00 60%, #00ff00 80%); } #RadialRightTop { float:left; background: radial-gradient(at right top, #ff0000, #ffff00, #00ff00); } #RadialRadiusCenter { float:left; background: radial-gradient(farthest-side at top right, #ff0000, #ffff00, #01fefe); } #RadialGroup { float:left; background: radial-gradient(farthest-side at top right, #ff0000, #ffff00, #009f00, transparent), radial-gradient(60px at top left, #ff0000, #ffff00, #00ff0e); }三、重复的线性渐变：repeating-linear-gradient语法和参数类似线性渐变，这里不在赘述。详情请参考CSS手册。示例： #RepeatingLinearPercentage{ float:left; background: repeating-linear-gradient(#ff0000, #00ff00 10%, #000000 15%); } #RepeatingLinearRight { float:left; background: repeating-linear-gradient(to right, #ff0000, #00ff00 10%, #000000 15%); } #RepeatingLinearAngle { float:left; background: repeating-linear-gradient(45deg, #ff0000, #00ff00 10%, #0000ff 15%); } #RepeatingLinearBottomLeft { float:left; background: repeating-linear-gradient(to bottom left, #00ffff, #ff0000 10%, #00ff00 15%); }四、重复的径向渐变：repeating-radial-gradient语法和参数类似径向渐变，这里不在赘述。详情请参考CSS手册。示例：#RepeatingRadialCircle { float:left; background: repeating-radial-gradient(circle, #ff0000 0, #00ff00 10%, #0000ff 15%); } #RepeatingRadialTopLeft { float:left; background: repeating-radial-gradient(at top left, #ff0000, #00ff00 10%, #0de0f0 15%, #ffff00 20%, #000000 25%); } #RepeatingRadialClosestCorner { float:left; background: repeating-radial-gradient(circle closest-corner at 20px 50px, #00ff00, #ff0000 10%, #00ffff 20%, #ffff00 30%, #ff00ff 40%); }完整的例子： ImageCSS3 p { width: 200px; height: 100px; margin: 10px 5px; border: 1px solid #ddd000; } #LinearStartToEnd { float:left; background: linear-gradient(#ff0000, #00ff00); } #LinearPercentage { float:left; background: linear-gradient(#0000ff, #ff0000 52%, #00ff00); } #LinearAnglePercentage { float:left; background: linear-gradient(90deg, #ff0000 20%, #00ff00 50%, #000000 80%); } #LinearAngle { float:left; background: linear-gradient(30deg, #ffff00 30%, #ff0000, #00ff00); } #LinearTopRight { float:left; background: linear-gradient(to right top, #00ff00, #ff0000 50%, #0000ff); } #RadialCenterCircle { float:left; background: radial-gradient(circle at center, #ff0000, #ffff00, #00ffff); } #RadialClosestSide { float:left; background: radial-gradient(circle closest-side, #ff0000, #00ff00, #ffff00); } #RadialFarthestSide { float:left; background: radial-gradient(farthest-side, #ff0000 20%, #ffff00 60%, #00ff00 80%); } #RadialRightTop { float:left; background: radial-gradient(at right top, #ff0000, #ffff00, #00ff00); } #RadialRadiusCenter { float:left; background: radial-gradient(farthest-side at top right, #ff0000, #ffff00, #01fefe); } #RadialGroup { float:left; background: radial-gradient(farthest-side at top right, #ff0000, #ffff00, #009f00, transparent), radial-gradient(60px at top left, #ff0000, #ffff00, #00ff0e); } #RepeatingLinearPercentage{ float:left; background: repeating-linear-gradient(#ff0000, #00ff00 10%, #000000 15%); } #RepeatingLinearRight { float:left; background: repeating-linear-gradient(to right, #ff0000, #00ff00 10%, #000000 15%); } #RepeatingLinearAngle { float:left; background: repeating-linear-gradient(45deg, #ff0000, #00ff00 10%, #0000ff 15%); } #RepeatingLinearBottomLeft { float:left; background: repeating-linear-gradient(to bottom left, #00ffff, #ff0000 10%, #00ff00 15%); } #RepeatingRadialCircle { float:left; background: repeating-radial-gradient(circle, #ff0000 0, #00ff00 10%, #0000ff 15%); } #RepeatingRadialTopLeft { float:left; background: repeating-radial-gradient(at top left, #ff0000, #00ff00 10%, #0de0f0 15%, #ffff00 20%, #000000 25%); } #RepeatingRadialClosestCorner { float:left; background: repeating-radial-gradient(circle closest-corner at 20px 50px, #00ff00, #ff0000 10%, #00ffff 20%, #ffff00 30%, #ff00ff 40%); } <p id="RepeatingLinearRight&
html中的font设置字体
html中font标签本身就是一个设置字体属性的标签，那么它的具体属性有哪些呢?下面由我为大家整理了html中的font设置字体的相关知识，希望对大家有帮助!
html中font设置字体 总结
一、font标签语法与结构
www.divcss5.com 颜色
Font color设置文本颜色为红色“#FF0000” ，你可能想了解css字体颜色：css color
www.divcss5.com 文字大小
Font size设置文本文字大小尺寸为6 ，你可能想了解css字体大小：css font-size
微软雅黑 字体
Font face设置文本字体为“微软雅黑” ，你可能想了解css字体设置： css font-family
二、Font标签说明
常常我们在一个网页中直接使用font标签进行对文本设置文本字体、文本文字大小、文本颜色等样式。
三、Font应用案例html代码
www.divcss5.com 设置文本颜色
www.divcss5.com 设置文本字体大小
微软雅黑字体 设置了文本字体
补充：css5对于font直接设置网页文本样式标签总结
1)、使用font size设置文字大小
2)、使用html font标签face属性 设置文字字体
3)、使用html font color 设置文字颜色
html中的font设置字体
font一般是在font标签中设置字体，比如字体的大小、颜色和字体类型等等。 font-style设置字体风格。font-variant以小型大写字体或者正常字体显示文本。font-weight设置字体的粗细。 需要准备的材料分别有：电脑、浏览器、html编辑器。首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。在index.html中的div标签中，输入样式代码：style=font-weight：800。
推荐阅读
- ○ 最新最优拆解新零售的未来发展 可以通过搭建全渠道新零售体系
- ○ 雪球也能爆炸 吉格斯
- ○ 江西华伍
- ○ pvc电线管价格
- ○ 大齿轮厂家
- ○ 君威汽车
- ○ 开业礼品
- ○ 芬迪诗
- ○ pvc背包
- ○ 倩碧宛若新生
最新文章
- ○ 最新最优拆解新零售的未来发展 可以通过搭建全渠道新零售体系
- ○ 雪球也能爆炸 吉格斯
- ○ 江西华伍
- ○ pvc电线管价格
- ○ 大齿轮厂家
- ○ 君威汽车
- ○ 开业礼品
- ○ 芬迪诗
- ○ pvc背包
- ○ 倩碧宛若新生