CSS linear-gradient() 函数创建一个表示颜色线性渐变的 <image> 。该函数的结果是CSS <gradient> 数据类型的对象。像任何其他渐变，CSS线性渐变不是一个CSS <color> ，而是一个没有内在尺寸的图像; 也就是说，它既不具有 固有的或首选的尺寸，也不具有比率。它的具体尺寸将与其适用的元素的尺寸匹配。线性梯度由一个轴 (梯度线) 定义，其上的每个点具有不同的颜色。垂直线到渐变线有一种单一颜色，在渐变线上的一个点。渐变线由包...
在css中，如果一条边框线有n像素的宽度，那么就可以对其设置n种不同的颜色。 在代码中，我们可以定义一条宽为7px的实线：border: 7px solid #C8C8C8;（不要在意此处设置的颜色，在firefox中后面的代码中会被新设置的颜色覆盖掉） 如果对border中四边的边框同时设置渐变的颜色，如下述代码所示：<html> <head> <style>p{height: 100px;width: 100px;border: 7px solid red;border-color: red green yellow black;} <...
导入外部css样式表的方法使用link标签导入外部css样式表<link rel="stylesheet" href="css/demo01.css">在样式表中import(导入)外部样式表@import url("/crazy-html5/06css/css/demo01.css");使用内部样式表内部样式表只能作用于某一个网页，定义方式为在head头部添加style标签，在style标签中即可添加页面样式。<head><style>table {background: #003366;}</style> </head>选择器知识点元素属性选择器普通标签选择器table:{backgr...
只用css实现“每列四行，加载完一列后数据自动填充到下一列”的效果。这个题目用图表示如下：如果将题目换成“只用css实现每行四列，加载完一行后数据自动填充到下一行”，那这个问题就简单多了，相信大家都能使用多种方法实现。但现在这个问题该怎么去解决呢。对了这个题目，似乎不是那么好解决，毕竟像这类问题我们都是使用js或者模版辅助实现的。这个题目难点在哪儿？对动态添加的数据只用css实现这个效果，那就意味着除了动态添...
这篇文章详解CSS3背景相关样式实例代码background-image绘制多张图片叠加，示例如下:<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>background-image绘制多张图片叠加</title><style>div{width:1100px;height:800px;background-image: url("../../image/icon1.jpg"),url("../../image/border3.jpg");background-repeat: repeat-x,no-repeat ;background-position:100%,100%,center,center;border:5px solid #ff0000;...
这次给大家带来详解CSS之margin的特殊使用技巧，详解CSS之margin特殊使用技巧的注意事项有哪些，下面就是实战案例，一起来看一下。一、简介margin我们一般习惯的叫它外边距，分别可以设置四个方向的外边距，这里不再赘述赋值语法。实际上，我们通常设置的margin是物理级别的设置，而margin还有start、end、before、after等，这些主要是逻辑级别的设置，如果你感兴趣的话，自行Google吧。在设置margin时，我们必须要知道：对于块级元...
块级元素div尽量少用，其实和table一样，嵌套越少越好，它也是会影响速度的！ ol 有序列表。 …… …… …… 表现为： 1…… 2…… 3…… ul 无序列表，表现为li前面是大圆点而不是123 …… …… 多人容易忽略 dl dt dd的用法 dl 内容块 dt 内容块的标题 dd 内容 以这么写： 标题 内容1 内容2
圆角： border-radius阴影： box-shadow边框图片： border-image盒子内减： box-sizing:border-box;圆角：border-radius:像素/百分比一个值设置的是盒子的四个角的水平和垂直半径 每个角都可以单独进行设置，取值顺序是左上 右上 右下 左下顺时针设置 可以简写，逻辑跟padding和margin一样 单位支持像素，和百分比（参照的是宽度和高度）可以用 水平半径/垂直半径去单独控制半径，并且每一个半径都可以单独控制p:nth-child(5){bord...
本篇文章主要介绍了CSS3中字体平滑处理和抗锯齿渲染，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。在围观Drupal官方主题的时候，发现了一个有意思的非标准CSS选择器-webkit-font-smoothing，于是上手把玩了一番。如何使用css3字体平滑显示呢要知道，W3C对CSS中字体的抗锯齿渲染是有过考虑的，如font-smooth，不过可能由于不同操作系统以及浏览器内核对字体的渲染存在差异，总之，他并没有被选入Web标准。但是WebKit还是保留...
这篇文章主要介绍了CSS3制作文字流光渐变特效的制作方法，有一定的参考价值，感兴趣的小伙伴可以参考一下，希望对你有的帮助！先上个效果图下面先上代码HTML部分<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title></head> <body><p class="masked"><h4>日暮苍山远，天寒白屋贫。柴门闻犬吠，风雪夜归人。</h4> </p></body> </html>CSS部分 <style>.masked h4{display: block;width: 600px;hei...
CSS中关于focus伪类的使用实例详解；css中：focus伪类的使用，即给已获取焦点的元素设置样式示例一<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>:focus</title><style>*{margin: 0;padding: 0;}input:focus{background: #cbcbcb;}</style></head><body><input type="text"/></body></html>以上通过：focus给input输入框进行了得到焦点时的样式的设置示例二：focus使用于页面的导航栏时，代码示例如下：<!DO...
随着互联网的发展，人们对页面的要求越来越高，不只是功能好用，而且还要颜值高。前端开发人员对于浏览器的滚动条并不陌生，当自带的一些滚动条无法满足我们的审美时，你知道如何用CSS修改浏览器滚动条的样式吗？今天就给大家介绍如何设置div滚动条样式。有需要的小伙伴可以参考一下。我们在自定义滚动条样式前，首先要了解滚动条的结构。通俗来讲，滚动条由两部分组成：一部分是可以滑动的部分，我们称它为滑块；另一部分是滚动条...
在上述文章中，我们对float基本属性有了详细的理解，下面我们来讲述float怎么用，最经典的案例分享。【推荐阅读：前端float怎么用？float属性详解】在csss样式中，浮动float是最好的属性，我们可以通过不同的浮动属性来去定位div元素，来达到想要的效果，float属性就是控制盒子以及盒子中的内容向右向左浮动，在css中，任何的元素都是可以进行浮动的。案例分享： 在上述图片中，我们定义了2个div模块，一个是大的模块，一个是小的...
这次给大家带来css样式中的border-image使用详解，使用css样式中border-image的注意事项有哪些，下面就是实战案例，一起来看一下。border-image-source 属性设置边框的图片的路径[none | <image>]p {border: 20px solid #000;border-image-source: url(border.png); }border-image-slice 属性图片边框向内偏移[ <number> | <percentage> ](1,4) ?fillp {border: 20px solid #000;border-image-source: url(border.png);border-imag...
表单加星号意思是必填项了，这种功能我们其实见得也是非常的多了本文我们就一起来看一篇关于CSS 给表单必选项添加星号的例子，希望能帮助到大家。<script>ec(2);</script>在制作网页表单的时候，如果一个选项是必填的，通常会给选项添加一个星号，比如 WordPress 的评论表单：<p class="form-group"><label for="author">姓名</label> <span class="required">*</span><input type="text" id="author" name="author" required="req...