Css border样式
1 四个边框
border-left 设置左边框,一般单独设置左边框样式使用
border-right 设置右边框,一般单独设置右边框样式使用
border-top 设置上边框,一般单独设置上边框样式使用
border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。
2 四边相同边框border简写
#divcss5{border:1px solid #00F}
设置了divcss5对象盒子1px像素蓝色实线边框
3 边框三个样式
通常我们可以对边框设置宽度(厚度)、边框样式、边框颜色这三个属性与参数。
边框样式值如下:
none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)
solid : 实线边框(常用)
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge : 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边
4
边框样式截图:

5
我们通常使用主流浏览器兼容边框样式有:
1、实线边框:solid
Border:1px solid #000 设置对象1px(像素)宽厚的黑色实线边框。
2、虚线边框:dashed
Border:1px dashed #000 设置对象1px(像素)宽厚的黑色虚线边框。
Css border样式的更多相关文章
- 精简的网站reset 和 css通用样式库
参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...
- css初始化样式代码
为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- CSS Reset样式重置
为了让页面在各不同浏览器之间显示效果一致,CSS样式清除和重置是前端开发必需要做的事情,结合前车之鉴,整理了份CSS重置样式代码供参考. @charset "utf-8"; /* ...
- CSS详细样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- CSS border三角、圆角图形生成技术简介
http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...
- 第1天:CSS基本样式
今天学习了CSS基本样式和属性.在做练习的时候遇到一个小问题,最后解决了. 记住:浏览器有默认margin和padding.样式最开始记得一定写:*{margin:0;padding:0}. 学习经验 ...
- 用JS控制CSS基本样式
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...
随机推荐
- Linux内核编译測试
内核编译: Step 1:配置内核编译选项. make menuconfig Optional Step :排除编译结果文件(.o)等之间的依赖性. make mrproper Optional St ...
- bzoj1045: [HAOI2008] 糖果传递(数论)
1045: [HAOI2008] 糖果传递 题目:传送门(双倍经验3293) 题解: 一开始想着DP贪心一顿乱搞,结果就GG了 十分感谢hzwer大佬写的毒瘤数论题解: 首先,最终每个小朋友的糖果数量 ...
- apiCloud实现加载更多效果,基本完美~
apiCloud实现加载更多效果 1.接口支持,加入参数page. $page = $this->_request('page','trim','1'); $pagesize = 10; // ...
- 12.boost有向图无向图(矩阵法)
#include <iostream> #include <boost/config.hpp> //图 #include <boost/graph/adjacency_m ...
- 092117-6265-01.dmp 蓝屏日志文件
Microsoft (R) Windows Debugger Version 10.0.15063.137 AMD64 Copyright (c) Microsoft Corporation. All ...
- 12:Challenge 5(线段树区间直接修改)
总时间限制: 10000ms 单个测试点时间限制: 1000ms 内存限制: 262144kB 描述 给一个长为N的数列,有M次操作,每次操作是以下两种之一: (1)将某连续一段同时改成一个数 ...
- (转载)15 个 Android 通用流行框架大全
15 个 Android 通用流行框架大全 时间:2017-03-20 11:36来源:未知 作者:admin 点击: 2089 次 15 个 Android 通用流行框架大全 1. 缓存 Dis ...
- (转载)BeanUtils.copyProperties() 用法
BeanUtils.copyProperties() 用法 标签: hibernateuserjdbc数据库strutsjava 2009-10-17 23:04 35498人阅读 评论(6) 收藏 ...
- LeetCode hard 668. Kth Smallest Number in Multiplication Table(二分答案,一次过了,好开心,哈哈哈哈)
题目:https://leetcode.com/problems/kth-smallest-number-in-multiplication-table/description/ 668. Kth S ...
- CF 287(div 2) B Amr and Pins
解题思路:一开始自己想的是找出每一次旋转所得到的圆心轨迹,将想要旋转到的点代入该圆心轨迹的方程,如果相等,则跳出循环,如果不相等,则接着进行下一次旋转.后来看了题解,发现,它的旋转可以是任意角度的,所 ...