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. Android NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件

    NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只 ...

  2. CISP/CISA 每日一题 七

    CISA 每日一题(答) 确保只有恰当授权的出站交易才能被处理,控制目的: 1.出站交易是基于授权而被启动: 2.出站交易包含了唯一的预先授权的交易类型: 3.出站交易只能被发送到合法的商业伙伴那里. ...

  3. Windows环境下ARM集成开发环境的搭建与使用

    Windows环境下能够使用Eclipse IDE for C/C++ Developers来搭建ARM开发环境 本文地址:http://blog.csdn.net/u011833609/articl ...

  4. BeautifulSoup的高级应用 之 contents children descendants string strings stripped_strings

    继上一节.BeautifulSoup的高级应用 之 find findAll,这一节,主要解说BeautifulSoup有关的其它几个重要应用函数. 本篇中,所使用的html为: html_doc = ...

  5. 不安装谷歌市场，下载谷歌市场中的APK

    不安装谷歌市场,下载谷歌市场中的APK GooglePlayStore 是谷歌官方的的应用市场,有的时候还是需要从谷歌市场下载APK文件.国内的安卓手机厂商都不自带GooglePlay,甚至一些手机& ...

  6. LinearLayout-layout_gravity 属性没有效果分析

    今天在一个布局文件中,遇到了一个问题,先看代码 <LinearLayout android:layout_width="match_parent" android:layou ...

  7. <%%>创建内联代码块(表达式)

    其实<%%>很早之前就见过了,只是会用一点功能,其它的不甚了解.今天偶尔见到了它的庐山真面目,现在共享给大家. 语法 代码块呈现(<%%>)定义了当呈现页时执行的内联代码或内联 ...

  8. JQuery的index()函数

    1.index(),这里的索引从0开始计数. jQueryObject.index( [ object ] ):1.1 如果没有指定参数object,则返回当前元素在其所有同辈元素中的索引位置.1.2 ...

  9. JS/CSS 响应式样式实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. input输入框获得、失去焦点添加事件

    onBlur:当输入框失去焦点后 onFocus:当输入框获得焦点后 这两个JavaScript事件是写在html标签中的例如: <input type="text" onB ...