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. 1.19 Python基础知识 - 软件目录开发规范及不同模块之间的调用

    一个软件项目的开发,除了需要很厉害的开发能力,同时在软件开发项目时,也需要对项目结构有良好的组织能力,将功能进行拆分,不同的功能放在不同的目录或文件中,方便日后的维护,升级等操作.比如核心代码的目录, ...

  2. 《二》Java IO 流的分类介绍

    一.根据流向分为输入流和输出流: 注意输入流和输出流是相对于程序而言的. 输出:把程序(内存)中的内容输出到磁盘.光盘等存储设备中        输入:读取外部数据(磁盘.光盘等存储设备的数据)到程序 ...

  3. react实战项目-很适合进阶

    前言 前段时间学习完了React的基础,自己网上找了一些实战项目,做了几个感觉项目不是很全面,就想做一个完整的项目来提升自己的React水平.以前学习Vue的时候,就看过bailicangdu大神的v ...

  4. hbs模板（zmaze ui用的）

    hbs模板(zmaze ui用的) 一.总结 1.模板引擎:就是来生成界面的啊,只不过实现了view和数据分离以及一些其它的功能(预加载等). 2.Handlebars :但他是一个单纯的模板引擎,在 ...

  5. 1.一个WEB应用的开发流程

    先说项目开发过程中团队人员的分工协作. 一.人员安排 毕业至今的大部分项目都是独立完成,虽然也有和其他同事协作的时候,但自认为对团队协作的了解和认知都还有所欠缺.很清楚团队协作的重要性,但尚未有很好的 ...

  6. LayUI-Table表格渲染

    记项目中又一表格使用方法,项目首选是使用BootstrapTable的,但是经过多番查证与调试,始终没有把固定列的功能调试成功,找到的成功的例子原样照搬都不行,文件引入也都没有问题,实在搞不懂了,如果 ...

  7. ArcGIS教程：地理处理服务演示样例（河流网络）（三）

    设置输出符号系统 步骤: 展开 StoweStreamNet.tbx 并双击创建河流网络模型. 接受默认的 45 公顷并单击确定以运行模型. StreamNet 图层将加入至 ArcMap. 右键单击 ...

  8. 关于YUM错误，Error: rpmdb open failed

    错误如题: rpmdb: Thread/process / failed: Thread died in Berkeley DB library error: db3 error(-) from db ...

  9. LoadRunner--录制手机APP脚本

    通过LR录制手机脚本的方式有三种: 1)通过安卓模拟器录制: 2)通过抓包录制: 3)通过代理方式录制: 本文使用第二种方式进行录制,首先需要先安装LoadRunner11测试工具,然后安装lr录制A ...

  10. Java Timer TimerTask Example（java Timer的例子）

    Java java.util.Timer is a utility class that can be used to schedule a thread to be executed at cert ...