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. Vijos——T 1164曹冲养猪

    https://vijos.org/p/1164 描述 自从曹冲搞定了大象以后,曹操就开始捉摸让儿子干些事业,于是派他到中原养猪场养猪,可是曹冲满不高兴,于是在工作中马马虎虎,有一次曹操想知道母猪的数 ...

  2. Mining Station on the Sea （hdu 2448 SPFA+KM）

    Mining Station on the Sea Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  3. 为什么golang的开发效率高（编译型的强类型语言、工程角度高、在开发上的高效率主要来自于后发优势，编译快、避免趁编译时间找产品妹妹搭讪，既是强类型语言又有gc，只要通过编译，非业务毛病就很少了）

    作者:阿猫链接:https://www.zhihu.com/question/21098952/answer/21813840来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  4. 104.tcp多线程读写实现群聊

    客户端: #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include <w ...

  5. vue-cli打包项目后，可以修改配置文件

    问题: 前端需要修改后台服务器地址url,写好的配置文件会在npm run build 后压缩在一起,传到运行的前端服务器上后,需要到前端打包的源码,找到url地址进行修改.如果不在打包的源码修改,则 ...

  6. 记一些stl的用法（持续更新）

    有些stl不常用真的会忘qwq,不如在这里记下来,以后常来看看 C++中substr函数的用法 #include<string> #include<iostream> usin ...

  7. 下次自己主动登录（记住password）功能

    1:进入cookie插件 <script src="jquery.cookie.js" type="text/javascript"></sc ...

  8. LeetCode Algorithm 04_Median of Two Sorted Arrays

    There are two sorted arrays A and B of size m and n respectively. Find the median of the two sorted ...

  9. 硬件——nrf51822第三篇，按键控制小灯

    现象是按键按下,小灯亮,按键抬起,小灯灭. 从这一节我们细致剖析gpio口的设置: nrf51822片上一共有32个数字引脚,分为4个port,如下: port 0 pin 0-7 port 1 pi ...

  10. 软件——关于C,typedef

    1;;写博客能让我慢下来,仔细思考 1;;这篇博客大多摘自网上 1;; 不管实在C还是C++代码中,typedef这个词都不少见,当然出现频率较高的还是在C代码中.typedef与#define有些相 ...