css3-4 css3边框样式
css3-4 css3边框样式
一、总结
一句话总结:
二、css3边框样式
1、相关知识
边框属性:
1.border-width
2.border-style
3.border-color
边框方位:
1.border-left:1px solid #f00;
2.border-top:1px solid #f00;
3.border-right:1px solid #f00;
4.border-bottom:1px solid #f00;
2、代码
border边框方位实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
} p{
border-left:5px solid #f00;
padding-left:5px;
}
</style>
</head>
<body>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
</body>
</html>
边框样式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
div{
width:1000px;
height:200px; /*border-style:solid;*/
/*border-style:dotted;*/
/*border-style:dashed;*/
/*border-style:double;*/
/*border-style:inset;*/
/*border-style:outset;*/
/*border-style:groove;*/
border-style:ridge;
border-width:10px;
border-color:#f00;
}
</style>
</head>
<body>
<div>
<span>html5+css3</span>
</div>
</body>
</html>
css3-4 css3边框样式的更多相关文章
- css3-10 css3中的边框样式有哪几种
css3-10 css3中的边框样式有哪几种 一.总结 一句话总结:1.border-radius 2. box-shadow 3.border-image三种,box一种border两种 1.css ...
- CSS3之边框样式(动画过渡)
简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...
- CSS3初学篇章_4(边框样式/段落样式)
边框样式 1.边框线语法:border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inse ...
- CSS3入门之边框与背景
CSS3入门之边框与背景 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !im ...
- CSS3的新增边框属性
一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...
- 认识CSS3新增选择器和样式
前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器 结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的 ...
- 纯css3手机页面图标样式代码
全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- CSS3透明背景+渐变样式
CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...
随机推荐
- 3.SOAP和WSDL的一些必要知识
转自:https://www.cnblogs.com/JeffreySun/archive/2009/12/14/1623766.html SOAP和WSDL对Web Service.WCF进行深入了 ...
- 快速排序的期望复杂度O(nlogn)证明。
快速排序的最优时间复杂度是 \(O(nlogn)\),最差时间复杂度是 \(O(n^2)\),期望时间复杂度是 \(O(nlogn)\). 这里我们证明一下快排的期望时间复杂度. 设 \(T(n)\) ...
- jQuery post 传递 iframe
//使用POST链接iframe function doOpenPostIfrm(url, args, iframe) { //创建一个隐藏表单 var _form = $("<for ...
- Logstash整合Elasticsearch
1:启动Elasticsearch2:bin/logstash -e 'input { stdin { } } output { elasticsearch { host => localhos ...
- Vue的学习--怎么在vue-cli中写网页
vue.min.js和vue-cli的区别和联系我现在还是没有太清楚,大概是还没搞清楚export default和new Vue的区别,先浅浅记录一下怎么“用vue-cli来写网页”. “vue-c ...
- springMVC通过ajax传递参数list对象或传递数组对象到后台
springMVC通过ajax传递参数list对象或传递数组对象到后台 环境: 前台传递参数到后台 前台使用ajax 后台使用springMVC 传递的参数是N多个对象 JSON对象和JSON字符串 ...
- 数据类型的提升(promotion)
假如参与运算的数据类型不同或者取值范围过小,编译器会自动将其转换为相同的类型,这个类型就叫数据类型的提升(promotion). 1. C++ 语言环境的规定 unsigned char a = 17 ...
- 存储过程和SQL语句比较
做为SQL存储过程和.NET的新手,下面的指导还是很有用的,自己这一段刚刚接触这些东西,搜集了一些相关的东西,能使新手较容易上手,当然啦,要精通和熟练应用,还是要看更多更深的资料的,高手请不要见笑.以 ...
- JavaScript篇(一)二叉树的插入 (附:可视化)
一.二叉树概念 二叉树(binary tree)是一颗树,其中每个节点都不能有多于两个的儿子. 字节一面,第一道就是二叉树的插入,在这里其实是对于一个二叉查找树的插入. 使二叉树成为二叉查找树的性质是 ...
- CSS伪元素与伪类的区别
伪类和伪元素介绍 伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能 ...