在html中双虚线怎么写,CSS虚线实现方法及多种应用实例
很多 CSS 初学者在前端开发过程中,经常会用到 CSS 虚线样式,但是不知道 CSS 虚线样式该如何实现,比如一个 CSS 这样写:border-style:dotted solid double dashed;出来的框就是:上边框是点状,右边框是实线,下边框是双线,左边框是虚线,如果一个 CSS 这样写:border-bottom:1px
dashed #000000;出来的框就是一条宽度为1像素的黑色下划虚线··· CSS 关于“线”的类型还真是挺多的,其中新手们比较关注的还是“虚线的实现方法”。
css虚线实现方法
定义和用法:
border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。
这里边框属性的虚线边框 border控制虚线。以下配置的 CSS 高度(CSS height)和 CSS 宽度( CSS width)为350像素。
1、四边为虚线边框
border:1px dashed #000; 黑色虚线边框
实例:
实例
.hackhome{border:1px dashed #000; height:50px;width:350px}
尝试一下 »
这里配置边框缩写形式解释 hackhome 挑选器四边边框为1px的黑色虚线边框
2、左边为虚线:
实例
.hackhome-1{border-left:1px dashed #000; height:50px;width:350px}
尝试一下 »
这里配置了左边一边为黑色虚线边框
3、右边为虚线:
实例
.hackhome-1{border-right:1px dashed #000; height:50px;width:350px}
尝试一下 »这里配置了右边一边为黑色虚线边框
4、顶部边(上边)为虚线:
实例
.hackhome-1{border-top:1px dashed #000; height:50px;width:350px}
尝试一下 »这里配置了顶边(上边线)一边为黑色虚线边框
5、底部边(下边)为虚线:
实例
.hackhome-1{border-bottom:1px dashed #000; height:50px;width:350px}
尝试一下 »这里配置了底边(下边线)一边为黑色虚线边框
6、随意一边不为虚线,其它三边为虚线状况
参与右边边框不为虚线而没有边线,其它三边为黑色虚线边框
实例
.hackhome{ border:1px dashed #000;border-right:0; height:50px;width:350px; }
尝试一下 »这里先配置了该对象四边为黑色1px 虚线边框,紧接着又配置一边边线为0的配置,这样相当于配置了3边的边框虚线属性,但是这里留意边框属性配置前后顺序
常用css虚线样式
例1
border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
例2
border-style:dotted solid double;
上边框是点状
右边框和左边框是实线
下边框是双线
例3
border-style:dotted solid;
上边框和下边框是点状
右边框和左边框是实线
例4
border-style:dotted;
所有 4 个边框都是点状
怎么用CSS实现链接的虚线下划线效果
修改您的样式表,找下边这段(一般都在开头)
a {
color:#3399FF;
font-weight:Normal; /*字体效果 普通 可以改成bold粗体*/
text-decoration:none; /*下划线效果:无下划线*/
}
a:hover {
color:#4499EE;
text-decoration:none; /*下划线效果:无下划线*/
border-bottom: 1px #0099CC dotted /*加一个只有下边的框 边框为虚线*/
}
a{}控制连接的效果 a:hover{}控制鼠标移上去的效果。
css分割线虚线代码应用实例
实心的线条:
竖直线:
虚线:
双线:
在html中双虚线怎么写,CSS虚线实现方法及多种应用实例相关推荐
- php虚线_实现css虚线样式的两种方式:dotted和dashed(实例)
css虚线边框怎么做?html虚线边框设置一般会想到border的solid,html网页布局中solid用的概率最高了,要有css虚线的效果还可以用图片做背景,但是不推荐,尽量使用css虚线样式做这 ...
- js写css字体,js如何写出css动画 ?js写css动画的方法(代码)
本篇文章给大家带来的内容是关于js如何写出css动画 ?js写css动画的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 使用setTimeout()或者setInter ...
- yii2 asset.php,Yii2中使用asset压缩js,css文件的方法_php实例
官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets. ...
- css 设置表格右边有图片_我写CSS常用的方法
在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边距折叠 ...
- html中collapse代码怎么写,CSS 面试题: 手写 collapse(折叠) 的 css/html 部分
注意 根据@_小白_的建议,用input配合伪类实现效果更好, 我实现了一下, 但是在微信小程序不好使(微信的input标签的type不支持值为checkbox或radio), 所以暂时这个阶段, 处 ...
- html5中底部对齐怎么写,css设置元素底部垂直对齐
css中怎么让div里面的文字底部对齐 两种办法,第一种可以作为默认选择.两种办法都可以让文字底部对齐. css如何使div里面的文字垂直对齐 页面里有五段文字/图片,我想使每个部分的文字,像旁边的图 ...
- html中左右浮动怎么写,css 浮动(float)页面布局
[第一步 整体布局与公共CSS定义]我们先来分析一下这个页面 页面主要分5大块,顶部的Logo.导航条Nav.Banner.Content.Footer,如下图 下载 (116.12 KB) 2009 ...
- html中盒子浮动怎么写,CSS盒子的浮动
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用"浮动"方式后,块级元素的表现就会有所不同. CSS中有一个fl ...
- html中斜体样式怎么写,css斜体样式怎么写
在css中,可以使用"font-style"属性来实现文字斜体样式,语法"font-style:italic|oblique",其中italic是斜体样式,ob ...
最新文章
- 如何指定在Git上执行shell命令时使用的私有SSH密钥?
- 奥巴马就职委员会选择微软Silverlight技术
- Oracle笔记 八、PL/SQL跳转/判断/循环语句块
- 浅谈python的对象的三大特性之封装
- JavaScript from C#(入门篇)
- 作为前端开发,如何高效学习 TypeScript
- 扫一扫 移动端_移动端手机APP 身份证识别 手机扫一扫离线识别
- 调整linux块大小,Linux系统之更改默认块大小
- 基于JavaFX的Linux进程树
- Servlet的单例模式
- 元素exist/present/visible(vanish)/enable的区别
- 在Linux环境下安装MYSQL
- java 定时缓存的实现
- windows L2TP 拨号无法连接
- 经典c程序100例详解
- excel插入行 uipath_UIPath入門系列三之操作Excel表格
- 微信输入法 你有了吗?张小龙:防窃听、护隐私
- 手机沙盒隔离软件_虚拟隔离沙箱|隔离沙箱(BufferZone Pro)下载 v4.07 免费版 - 121下载站...
- 如何区分研究背景与研究意义
- windows installer服务坏了修复方法
热门文章
- 芒果超媒的长视频寒冬突围
- CCF-CSP 201703-1 分蛋糕 java实现
- jsp中js模板字符不生效
- Python44_网络编程(UDP、TCP)
- WPS Word中怎么打出拼音和声调让别人懂的这个字怎么读
- YUV 后面数字的含义_笔记本电脑CPU字母含义及天梯图
- NOPI导出标准格式Excel
- Photoshop中怎么画虚线
- 【Android 逆向】x86 汇编 ( call 子函数调用指令 | jmp 跳转指令 | lea 加载指令 | mov 数据传送指令 )
- QQ消息记录总是卡在消息记录加载中页面解决方法