• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css制作网页中的虚线(border属性的使用方法)

css制作网页中的虚线(border属性的使用方法)

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css,网页中的虚线,border属性等相关知识,佚名 希望在学习及工作中可以帮助到您

这里边框属性的虚线边框border控制虚线。以下配置的css 高度(css height)和css 宽度(css width)为350像素。

一、四边为虚线边框

border:1px dashed #000; 黑色虚线边框

实例:

CSS代码: .hackhome{border:1px dashed #000; height:50px;width:350px}

Html代码: 我的四边为黑色虚线边框

这里配置边框缩写形式解释hackhome挑选器四边边框为1px的黑色虚线边框

二、左边为虚线:

CSS代码: .hackhome-1{border-left:1px dashed #000; height:50px;width:350px}

Html代码: 我的左边为黑色虚线边框

这里配置了左边一边为黑色虚线边框

三、右边为虚线:

CSS代码: .hackhome-2{border-right:1px dashed #000; height:50px;width:350px}

Html代码: 我的右边为黑色虚线边框

这里配置了右边一边为黑色虚线边框

四、顶部边(上边)为虚线:

CSS代码: .hackhome-3{border-top:1px dashed #000; height:50px;width:350px}

Html代码: 我的上边为黑色虚线边框

这里配置了顶边(上边线)一边为黑色虚线边框

五、底部边(下边)为虚线:

CSS代码: .hackhome-4{border-bottom:1px dashed #000; height:50px;width:350px}

Html代码: 我的下边为黑色虚线边框

这里配置了底边(下边线)一边为黑色虚线边框

六、随意一边不为虚线,其它三边为虚线状况

参与右边边框不为虚线而没有边线,其它三边为黑色虚线边框

CSS代码: .hackhome-5{border:1px dashed #000;border-right:0; height:50px;width:350px}

Html代码: 我的右边边框无边线而其它三边为黑色虚线边框实例

这里先配置了该对象四边为黑色1px虚线边框,紧接着又配置一边边线为0的配置,这样相当于配置了3边的边框虚线属性,但是这里留意边框属性配置前后顺序

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06css控制文本框宽度的方法
  • 2017-08-06使用单div实现CSS 绘图方法汇总
  • 2017-08-06CSS Hack 区分 IE6 / IE7 /IE8 /Firefox
  • 2017-08-06用CSS背景属性代替图片SRC
  • 2017-08-06css制作网页中的虚线(border属性的使用方法)
  • 2017-08-06css reset样式重置介绍 重置css样式工具分享
  • 2017-08-06CSS网页布局时常犯的几种小错误小结
  • 2017-08-06css 超过宽度的文字显示点点
  • 2017-08-06CSS margin 属性定义边外补白
  • 2017-08-06CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css中padding和margin的异同点介绍
    • CSS实现table td中文字的省略与显示(兼容IE与FF、Chrome)
    • 浅析rem和em和px vh vw和% 移动端长度单位
    • Firefox按钮和锚标签上的虚线轮廓删除方法
    • DIV+CSS命名规范全记录
    • 浅谈CSS编程中的怪异模式
    • 浏览器实现移动端高性能css3动画(开启gpu加速)
    • 纯css3无js实现的Android Logo(有简单动画)
    • css中visiblity和display异同详解
    • 元素绝对定位以后设置了高宽,a标签不能点击的原因及解决方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有