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边框样式的更多相关文章

  1. css3-10 css3中的边框样式有哪几种

    css3-10 css3中的边框样式有哪几种 一.总结 一句话总结:1.border-radius 2. box-shadow 3.border-image三种,box一种border两种 1.css ...

  2. CSS3之边框样式（动画过渡）

    简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...

  3. CSS3初学篇章_4（边框样式/段落样式）

    边框样式 1.边框线语法:border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inse ...

  4. CSS3入门之边框与背景

    CSS3入门之边框与背景 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !im ...

  5. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  6. 认识CSS3新增选择器和样式

    前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器 结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的 ...

  7. 纯css3手机页面图标样式代码

    全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...

  8. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  9. CSS3透明背景+渐变样式

    CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...

随机推荐

  1. 3.SOAP和WSDL的一些必要知识

    转自:https://www.cnblogs.com/JeffreySun/archive/2009/12/14/1623766.html SOAP和WSDL对Web Service.WCF进行深入了 ...

  2. STS清理

    图中插入代码如下,文件名随意最好见名知意 Add 'this' qualifier to unqualified field accesses Add 'this' qualifier to unqu ...

  3. COGS——T 1265. [NOIP2012] 同余方程

    http://cogs.pro/cogs/problem/problem.php?pid=1265 ★☆   输入文件:mod.in   输出文件:mod.out   简单对比时间限制:1 s   内 ...

  4. 学习笔记（三）：jQuery之DOM

    1.jQuery属性. 获取元素属性的语法: attr(name)                   例子:$("#img1").attr("src"); 设 ...

  5. hibernate hbm.xml配置映射

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  6. 洛谷 P2646 数数zzy

    P2646 数数zzy 题目描述 zzy自从数学考试连续跪掉之后,上数学课就从来不认真听了(事实上他以前也不认真听).于是他开始在草稿纸上写写画画,比如写一串奇怪的字符串.然后他决定理♂性♂愉♂悦♂一 ...

  7. HTML、XHTML、css速记

    一.HTML 下面内容记录经常使用的html元素.可另存为html文件以查看效果: <!doctype html> <html lang="zh-cn"> ...

  8. 学习Java必看书籍和步骤

    Java语言基础  谈到Java语言基础学习的书籍,大家肯定会推荐Bruce Eckel的<ThinkinginJava>.它是一本写的相当深刻的技术书籍,Java语言基础部分基本没有其它 ...

  9. C++的模板template

    模板是C++支持参数化多态的工具,使用模板可以使用户为类或者函数声明一种一般模式,使得类中的某些数据成员或者成员函数的参数.返回值取得任意类型. 模板是一种对类型进行参数化的工具: 因此,使用模板的目 ...

  10. 【Codeforces Round #442 (Div. 2) D】Olya and Energy Drinks

    [链接] 我是链接,点我呀:) [题意] 给一张二维点格图,其中有一些点可以走,一些不可以走,你每次可以走1..k步,问你起点到终点的最短路. [题解] 不能之前访问过那个点就不访问了.->即k ...