首页 > 其他分享 >css虚线

css虚线

时间:2023-10-07 17:46:16浏览次数:30  
标签:D0D7E6 gradient 50% 虚线 background 0% transparent css

代码:
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5 <meta charset="UTF-8">
 6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 <title>虚线</title>
 9 <style>
10 .line {
11 background: -webkit-linear-gradient(to left, transparent 0%, transparent 50%, #D0D7E6 50%, #D0D7E6 100%);
12 background: -moz-linear-gradient(to left, transparent 0%, transparent 50%, #D0D7E6 50%, #D0D7E6 100%);
13 background: -o-linear-gradient(to left, transparent 0%, transparent 50%, #D0D7E6 50%, #D0D7E6 100%);
14 background: -ms-linear-gradient(to left, transparent 0%, transparent 50%, #D0D7E6 50%, #D0D7E6 100%);
15 background: linear-gradient(to left, transparent 0%, transparent 50%, #D0D7E6 50%, #D0D7E6 100%);
16 background-size: 20px 2px;
17 background-repeat: repeat-x;
18 padding: 10px;
19 }
20 </style>
21 </head>
22 
23 <body>
24 <div class="box line"> </div>
25 </body>
26 
27 </html>

 

 

标签:D0D7E6,gradient,50%,虚线,background,0%,transparent,css
From: https://www.cnblogs.com/j-a-h/p/17747041.html

相关文章

  • css移除button按钮的所有属性
    例如需要点击按钮才能触发的事件,按钮里面放图片会影响原本样式,这时需要隐藏button的样式style="all:unset;"效果:点击客服图标打开小程序客服窗口 ......
  • CSS与Bootstrap的关系和区别
    1.CSS是层叠样式表(CascadingStyleSheets)的缩写,是一种样式表语言,用于控制网页的视觉效果。2.Bootstrap是一个开源的前端UI框架,基于HTML、CSS和JavaScript,用于快速开发Web应用程序和网站。3.Bootstrap需要依赖CSS作为样式描述语言,包含了一系列预定义的CSS样式、布局模......
  • CSS
    CSS(CascadingStyleSheets)是一种用于描述HTML(或XML等)文档的样式和布局的标记语言。它通过为HTML元素应用样式规则来控制元素的外观和排版。CSS的主要作用是将网页的内容和样式分离,使得网页的结构和样式可以独立进行修改和管理。通过CSS,可以为HTML元素指定字体、颜色、背景、边框......
  • HTML+CSS随笔
    这是我的学习笔记,重点是我容易忘的内容,并不全面配合以下内容学习就很全面了黑马程序员pink老师前端入门教程HTMLHTML文件基础结构解析<!DOCTYPEhtml><htmllang="zh-han"><head><metacharset="UTF-8"><metaname="viewport"content="width=devic......
  • Css实现浏览滚动条效果
    Css实现浏览滚动条效果前言也是有大半个月没有更新文章了,大部分时间都在玩,然后就是入职的事。今天就更新一个小知识,刷抖音的时候看到的,感觉还不错。属性介绍关键属性animation-timeline:动画名称;用于控制动画的时间轴。它可以让你在一个元素上同时播放多个动画,控制它们的开......
  • 【HTML/CSS】入门导学篇
    博客主页:DuckBro博客主页系列专栏:HTML/CSS专栏关注博主,后期持续更新系列文章如果有错误感谢大家批评指出,一定及时修改感谢大家点赞......
  • CSS 基础 5 - CSS 选择器
    基础#id{}ID选择器.class{}类选择器tag{}标签选择器,tag可以是h1,p,div,span,img,nav,footer...*{}通用选择器,选择所有元素,可以和其他复杂选择器组合<divclass="class1class2"id="my-id"></div>注:每个元素可以有多个类,例如上面的HTML,在CSS中......
  • HTML+JavaScript+CSS DIY 分隔条splitter
    一、需求分析现在电脑的屏幕越来越大,为了利用好宽屏,我们在设计系统UI时喜欢在左侧放个菜单或选项面板,在右边显示与菜单或选项对应的内容,两者之间用分隔条splitter来间隔,并可以通过拖动分隔条splitter来动态调研左右两边的宽度。要在网页上实现这种UI界面,也有不少现成的组件,比如jQue......
  • styled-components & CSS pseudo classes All In One
    styled-components&CSSpseudoclassesAllInOne::after&::beforeCSS伪元素constListItem=styled.li`font-size:70px;font-weight:bold;cursor:pointer;color:transparent;-webkit-text-stroke:1pxwhite;position:relative;&......
  • CSS 实现 table 表头固定 tbody 显示垂直滚动条并自定义滚动条样式
    一、最终效果图 二、关键代码html代码:<divclass="table_info"><tableborder="0"cellspacing="0"cellpadding="0"style="width:100%;"><thead><tr><th>项目账号</th&g......