本文将通过一个实际应用场景，展示如何使用现代 CSS 实现时间轴、背景图 loading 效果、渐变边框等效果。...接下来我们重点看看如何实现时间轴、背景图 loading 效果和渐变边框。...，实现思路如下： 先把 ul 设置 list-style: none，去掉默认的 li 样式 利用 ::before 和 ::after 伪元素实现时间轴的小圆点和连接线 动画效果：四个小圆点默认和连接线一样灰色...还是可以利用 ::before 和 ::after 伪元素，一个伪元素用来显示 loading 图，另一个伪元素用来显示背景图片。...最后实现一个全尺寸带圆角渐变边框效果，一句话概括为利用线性渐变 linear-gradient 分别设置 padding-box 和 border-box 的背景，然后 border 颜色设置为透明即可实现
前段时间我写过一篇：CSS中background属性总结 整理了background的常用属性。 在CSS3中 background-image 还有一个 gradient 属性——渐变。...渐变大体分两种： 1、线性渐变：linear-gradient 线性渐变的用法是：linear-gradient(direction方向/角度,color1,color2......); 单向渐变：从一个水平或者垂直方向到另一个方向...background-image: linear-gradient(to right,red,blue); /*从左到右 由红到蓝渐变*/ 效果如下： 单向渐变：从一个角到另一个相对的角 background-image...*/ 效果如下： 角度渐变：渐变倾斜的角度 background-image: linear-gradient(45deg,white,blue); /*角度45度 由白到蓝*/ 效果如下： 2、径向渐变...：radial-gradient 径向渐变：radial-gradient(shape形状,color1,color2......); 径向渐变的形状有2种：ellipse椭圆形(默认);和circle
创建具有视频背景的网站| HTML和CSS 。使用HTML和CSS在您的网站上添加Glass效果。...为初学者学习HTML的简便方法 演示地址：https://wanghao221.github.io/video-background/ HTML代码 这是基本的HTML，对所有HTML文件都很重要。...我使用Google的样式在此HTML文件中导入Poppins，因为大多数人的设备上没有Poppins字体。 <head
元素的默认背景颜色是 transparent（透明），这意味着没有显式的背景颜色。...例如，在具有不同内容的多个块元素中，为每个块元素添加不同的背景颜色，可以使整个页面更加清晰、层次分明。 1.2 背景颜色的透明度 CSS3 引入了 RGBA 表示法，可以定义具有透明度的背景颜色。...background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ 在使用 RGBA 定义背景颜色时，透明度只会影响背景本身，元素内的文字和其他内容不会受到影响。...这对于带有边框的元素来说，可以有效地避免背景图片与边框重叠。...例如，对于带有边框的按钮，可能希望背景仅覆盖填充区域而不是边框，这样边框的颜色和背景就不会相互干扰。
渐变背景色：使用CSS渐变背景色可以为你的网站添加华丽的外观。尝试不同类型的渐变，如线性渐变、径向渐变或重复渐变。通过指定起始颜色和结束颜色，你可以创建丰富多彩的背景效果。....text { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } 渐变边框样式：使用CSS的border-image属性，你可以创建具有渐变效果的边框样式...定义渐变图像或渐变颜色作为边框的源，以及边框的切片方式和宽度。...：通过使用CSS的opacity属性和transition属性，你可以为元素创建透明度动画效果。...控制元素的透明度，使其在过渡期间平滑淡入或淡出。
然后给这个伪类设置一个2rpx的border，然后再将这个伪元素缩放0.5倍，最后让伪元素和这个盒子处于在同一位置。...那如果能有三个盒子，最上面的负责正常显示，中间的负责提供一个透明的1rpx的border，然后它自己有一个背景色。最下面的盒子负责提供一个渐变的背景色。这样子由于中间的盒子边框透明且有背景色。...那岂不是只有边框会被下面的盒子的渐变背景染色。那不就获得了一个渐变的1rpx的border？ok！...那我去试试试试就逝世，结果变成了这样子，我那么大一个边框直接就无了因为中间那个盒子的背景色直接将它透明的边框给染色了...不过还好，天无绝人之路，css里面有这么一个属性：background-clip...,mdn的解释如下：设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
为此，我们得另辟蹊径或者稍加改进，得到带圆角的渐变边框。...非常简单，简单的示意图如下： ? 利用 background-image 实现一个渐变背景，再通过叠加一个白色背景使之形成一个渐变边框。...CodePen Demo -- bg + overflow 实现渐变边框 缺点 这个方案有两个问题，第一个是多使用了两个元素(当然在这里是 ::before 和 ::after)，其次最致命的是，如果要求边框內的背景是透明的...background-clip：background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。它的部分取值和 box-sizing 类似。...CodePen Demo -- background-clip 实现渐变边框 缺点 与第一种方法类似，如果要求边框內的背景是透明的，此方案便行不通了。
半透明边框 难题 在 CSS 中使用半透明颜色，可以使用 rgba() 和 hsla()。 HSL代表色相，饱和度和亮度 - 使用色彩圆柱坐标表示。...尽管半透明颜色很受欢迎，但人们对其使用更多集中于背景上。 假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body 的背景会从它的半透明边框透上来。...这就可以解释我们遇到的难题：body 的背景并没有从内部 content 的半透明的白色半透明边框处透上来，而是在半透明白色边框处透出了这个容器自己的纯白实色背景，这实际上得到的效果跟纯白实色的边框看起来完全一样...该属性初始值为 border-box，意味着背景会被元素的 border box（边框的外沿框）裁切掉，如果设置为 padding-box，这样浏览器就会用内边距的外沿来把背景裁切掉。...以下是理论依据： “如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域， 过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那 个位置突然变化，而不是一个平滑的渐变过程。”
- 0 的颜色是透明色 transprent repeat-x 表示只在 x 方向重复 background-size: 4px 1px 表示上述渐变内容的长宽分别是 4px\ 1px，这样配合 repeat-x...此时，这样的背景效果可用于创建一种渐变黑色到透明的重复纹理效果： 在这个基础上，我们只需要给这个图形上层，再利用伪元素，叠加一层颜色，就得到了我们想要的边框效果，并且，边框间隙和大小可以简单调整。...： 与上面方法一类似，再通过在这个图形的基础上，在元素中心，叠加多一层纯色遮罩图形，只漏出最外围一圈的图形，带圆角的虚线边框就实现了： 此方法比上面第一种渐变方法更好之处在于，虚线每一条线段的长度是固定的...并且，不管是哪个方法，都存在一定的瑕疵。譬如如果希望边框中间不是背景色，而是镂空的，上述两种 CSS 方式都将不再使用。 因此，对于带圆角的虚线边框场景，最佳方式一定是 SVG。...通过一个动图，简单感受一下： 总结一下 本文介绍了 2 种在 CSS 中，不借助切图和 SVG 实现带圆角的虚线边框的方式： 重复角向渐变叠加遮罩层 重复线性渐变叠加遮罩层 当然，两种 CSS 方式都存在一定瑕疵
简单而言，background-clip 的作用就是设置元素的背景（背景图片或颜色）的填充规则。...: padding-box; // 边框下面没有背景，即背景延伸到内边距外沿。...将文字设为透明 color: transparent 别急！当然还有更有意思的，上面由于文字设置了颜色，挡住了 div 块的背景，如果将文字设置为透明呢？...大大增强了文字的颜色填充选择 文字颜色的动画效果 配合其他元素，实现一些其他巧妙的用法 实现文字渐变效果 利用这个属性，我们可以十分便捷的实现文字的渐变色效果。...利用了渐变 + animation 巧妙的实现了一些背景的渐变动画。可以很好的和本文的知识结合起来。 结合渐变动画，当然不一定需要过渡动画，这里我使用的是逐帧动画。
，另外一层伪元素实现虚化后的图片：这种好处是，背后的虚化图层，可以适配任意的不同图片：实现渐变色边框接下来，我们需要实现渐变色的边框效果。...，让整个图形，稍微比上述虚化背景大一点点即可，如此一来，效果就变成了这样：仔细看，图片带上了渐变色的边框。...除了渐变色边框之外，当前的效果，居然还自带了内发光（内阴影）效果，真是歪打正着，这不正是我们需要实现的吗：探究 filter: blur() 的透明效果这是为何呢？...div，其中，元素本身设置了一个角向渐变背景。...由于我们上述的效果是分层实现的，其中边框和内发光层，其实是这么个背景效果：我们要做的就是：利用 radial-gradient() 实现一个径向渐变 mask 遮罩；监听鼠标移动事件，移动 mask 遮罩的中心点
半透明边框 实现半透明边框可以有很多的实现方法，比如：伪元素和定位相结合，多层div包裹和定位相结合......，背景与边框的关系； background-clip:设置元素的背景（背景图片或者颜色)是否延伸到边框下面；重点在切割的位置 border-box: 默认情况 背景延伸到边框外延(但是在边框之下...使用inset后，阴影在边框内（即使是透明边框），背景之上内容之下。 offset-x,offset-y : 这是头两个 length 值，用来设置阴影偏移量。...效果图如上所示： 解决方案：css渐变和背景的扩展，在背景图之上在加一层纯色实色背景，给两层背景指定不同的background-clip; 渐变是可以和背景图片一起使用的，而且背景图片的预发和平时的写法是一样的...解决方案:伪元素，变形属性和css渐变实现 1.把这个元素设置为一个圆形； 2.用一个简单线性渐变来把图像的有半部分设为其他颜色 3.用伪元素覆盖到这个元素的渐变区域上面去（看起来这个元素和第一步效果一样
半透明边框 实现半透明边框可以有很多的实现方法，比如：伪元素和定位相结合，多层div包裹和定位相结合......使用inset后，阴影在边框内（即使是透明边框），背景之上内容之下。 offset-x,offset-y : 这是头两个 length 值，用来设置阴影偏移量。...效果图如上所示： 解决方案：css渐变和背景的扩展，在背景图之上在加一层纯色实色背景，给两层背景指定不同的background-clip; 渐变是可以和背景图片一起使用的，而且背景图片的预发和平时的写法是一样的...解决方案:伪元素，变形属性和css渐变实现 1.把这个元素设置为一个圆形； ? 2.用一个简单线性渐变来把图像的有半部分设为其他颜色 ?...3.用伪元素覆盖到这个元素的渐变区域上面去（看起来这个元素和第一步效果一样），通过旋转来决定漏出多大扇区； ? 4.选择任意角度 ?
给盒子指定纯色、渐变色背景以及图片背景 给盒子设置圆角边框/图片边框 给盒子设置阴影 本章文中示例代码托管在CodeSandbox[1]，请按需取用 一、设置盒子的背景 背景相关的属性有很多，接下来歪马一个一个给大家展示...关于颜色，现在 CSS 支持设置 16 进制表示的颜色、rgb()/rgba()以及hsl()/hsla()。其中的rgba()和hsla()除了可以设置颜色值之外，还可以设置颜色的透明度。...CSS 中还有另外一个属性opacity可以设置透明度，这个属性会把整个盒子变的透明，而不单单是背景色。 关于颜色的原理大家感兴趣可以参考文博大佬的这份 PPT[2]。...使用像素和em与使用百分比进行背景定位时，计算方式是不一样的。使用像素和em时，会一直以图片的左上角相对于父元素（左侧和顶部）来计算。使用百分比时，则是以图片中对应比例的点定位到父元素对应比例的点。...关于背景的内容就这么多了，下面我们来看看如何给元素设置圆角边框/图片边框。 二、设置圆角边框/图片边框 2.1 元素的边框 元素边框的属性比较简单。可以给某一边设置，也可以给四边设置。
效果展示 背景效果实现 效果展示 在这里插入图片描述 HTML结构 直接使用的body作为整个内容的大背景 CSS样式 元素具有一个从顶部到底部渐变的背景...，并且这个渐变背景会在水平方向上循环移动，从而创建一个动态的效果。...在Flex容器的主轴（默认为水平方向）上居中对齐其子元素。 为设置一个线性渐变背景。从顶部到底部，颜色从#add8e6（浅青色）渐变到#fff（白色）。...设置背景图像的大小为容器大小的200%。因为背景是一个渐变，所以这实际上为渐变动画提供了更多的空间。最后添加一个CSS动画。动画的持续时间为5秒，使用ease缓动函数，并且无限次地重复。...主要使用到的是以下四种： 基本样式： 设置云朵的颜色、形状、大小和透明度。 定位： 使用position: absolute;将云朵定位在页面的任意位置。
该属性有两个主要的取值：visible 和 hidden。 visibility: visible; 设置元素是可见的。...CSS 支持多种效果，包括：颜色、背景、边框、字体、阴影、渐变、过渡、动画等。 透明 在 CSS 中，透明度是指元素后面的背景被覆盖的程度。透明度可以使用 opacity 属性来设置。...opacity 属性的值范围为 0.0 到 1.0，其中 0.0 表示完全透明，1.0 表示完全不透明。...在 CSS 中，渐变（gradient）是一种用于创建平滑色彩过渡的效果。...渐变可以应用于元素的背景、边框、文本等。 线性渐变（linear gradient）：从一个位置开始，向另一个位置进行过渡。
如果利用自选图形，再经过边线及内部填充等设置，就能够制作出具有创意效果的相框。下面iSlide就讲述微立体相框和水晶相框的制作技法。...右击这个正六边形，选择“设置形状格式”，线条设置为“无线条”;填充设置为“渐变填充”，类型、方向等选默认，角度为45度，2个渐变光圈，光圈1颜色为“白色，背景1，深色15%”，光圈2颜色为“白色，背景1...开启一个空白幻灯片，设置其背景为“灰色—25%，背景2，深色50%”。插入一个圆角矩形(可拖动其黄色控制点来改变圆角的弧度)，设置它的线条为“渐变线”，填充类型为“路径”。...圆角矩形的内部填充为“渐变填充”，类型为“路径”，其中2个光圈：光圈1颜色为白色，位置为0%，透明度为100%;光圈2颜色为白色，位置为100%，透明度为90%。...插入一个大小合适的椭圆，设置为无线条，内部填充为“渐变填充”，类型为“路径”。其中2个光圈：光圈1颜色为白色，透明度为0%;光圈2颜色也为白色，透明度为100%。
Opacity： 透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。...Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。StartX和StartY：代表渐变透明效果的开始X和Y坐标。...FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。 2.BlendTrans：图像之间的淡入和淡出的效果 BlendTrans(Duration=?)...Color：指定阴影的颜色。OffX：指定阴影相对于元素在水平方向偏移量，整数。 OffY：指定阴影相对于元素在垂直方向偏移量，整数。...而文本，段落这样没有区域的元素不能使用CSS滤镜，对这样的元素我们可以设置元素的Height和Width样式或坐标来实现。"
background 的常见背景属性 css2.1 中，常见的背景属性有以下几种：（经常用到，要记住） background-color:#ff99ff; 设置元素的背景颜色。...background-clip属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面 格式举例： background-clip: content-box; 超出的部分，将裁剪掉。...，背景图片从边框部分开始加载，但是呢，超出内容区域的部分将被裁减掉。...渐变：background-image 渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。...clip-path：裁剪出元素的部分区域做展示 clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
OK，一起来看看一些额外的有意思的边框。 边框长度变化 先来个比较简单的，实现一个类似这样的边框效果： 这里其实是借用了元素的两个伪元素。...： 上述 Demo 完整代码如下： CodePen Demo -- dashed border animation[3] 其实由于背景和边框的特殊关系，使用 border 的时候，通过修改 background-position...关于背景和边框的填充关系，可以看这篇文章：条纹边框的多种实现方式[4] 渐变的其他妙用 利用渐变，不仅仅只是能完成上述的效果。...，将中间遮罩起来，一个 Nice 的边框动画就出来了 (动画会出现半透明元素，方便示意看懂原理)： 上述 Demo 完整代码如下，这个效果我最早见于这位作者 -- Jesse B[5] CodePen...，借用伪元素作为背景进行裁剪并动画即可，使用 clip-path 的优点了，切割出来的边框不会产生小三角。
云服务器
ICP备案
对象存储
即时通信 IM
云直播
