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. windows7下安装Office2010提示需要安装MSXML6.10.1129

    平台:Windows 7 问题:刚刚下载的ghost Win 7,安装过程一切顺利,进入系统后把集成的软件全部卸载,清理完垃圾,安装了VC库,在安装Office2010时提示需要安装MSXML6.10 ...

  2. C# 中 int、Convert.ToInt32（）、int.Parse()的区别

    int适合简单数据类型之间的转换,C#的默认整型是int32(不支持bool型); int.Parse(string sParameter)是个构造函数,参数类型只支持string类型; Conver ...

  3. 洛谷 P1760 通天之汉诺塔

    P1760 通天之汉诺塔 题目背景 直达通天路·小A历险记第四篇 题目描述 在你的帮助下,小A成功收集到了宝贵的数据,他终于来到了传说中连接通天路的通天山.但是这距离通天路仍然有一段距离,但是小A突然 ...

  4. POJ 3009 Curling 2.0 {深度优先搜索}

    原题 $On Planet MM-21, after their Olympic games this year, curling is getting popular. But the rules ...

  5. ZZUACM 2015 暑假集训 round 01

    A. Encoding Problem Description Given a string containing only 'A' - 'Z', we could encode it using t ...

  6. cookie记住用户名密码

    <script src="js/jquery.cookie.js" type="text/javascript"></script> $ ...

  7. nuxt.js配置BASE_URL（基本域名）和NODE_ENV（环境变量）

    一直以来,开发环境和生产环境的数据接口域名不一样总是困扰着我 每次打测试包或者线上包,我都得手动切换域名,我相信很多人的做法跟这差不多,类似下面这样: (你已经注意到,这个文件已经被我无情的删除了,因 ...

  8. 【习题 6-4 UVA-439】Knight Moves

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] bfs模板题 [代码] /* 1.Shoud it use long long ? 2.Have you ever test sev ...

  9. 【河南省多校脸萌第六场 E】LLM找对象

    [链接]点击打开链接 [题意] 在这里写题意 [题解] 把n个时间离散化一下. 对于不是相邻的点,在两者之间再加一个空格就好. 这样最多会有1000个位置. 则定义dp[i][k][j] 表示前i个数 ...

  10. jni和C++通信中文乱码的问题

    转自 http://www.cnblogs.com/bluesky4485/archive/2011/12/13/2285802.html 首先,需要明确几个关于编码的基本概念: java内部是使用的 ...