边框:(尺寸 样式 颜色)

div{border:1px solid red;}

样式可能的值:

dotted(点状边框,在大多数浏览器里呈现实线)

dashed(虚线。在大多数浏览器中呈现为实线)

solid(实线)

double(双线)


边框的方向:top right bottom left;

改变上边框:border-top:5px dashed black;

只改变上边框颜色:border-top-color:red;

那么,边框是什么形状呢?这取决于容器的大小,是一个非矩形。

来点炫酷的,边框三角形!

div{width:0px;
height:0px;
border:10px solid #fff;
border-top-color:#ccc;
}

HTML基础(2)——边框的更多相关文章

  1. HTML&CSS基础-外边框

    HTML&CSS基础-外边框  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML <!DOCTYPE html> <html> <h ...

  2. HTML&CSS基础-内边框

    HTML&CSS基础-内边框  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> &l ...

  3. css3基础-选择器+边框与圆角+背景与渐变

    Css3选择器相关: section > div直接子元素选择器 div + article相邻兄弟选择器(在元素之后出现) div ~ article通用兄弟选择器(在元素之后出现) 属性选择 ...

  4. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  5. CSS基础知识(颜色、伪类、盒子模型)

    6.设置颜色单位 L    普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L   颜色的八进制方式 ...

  6. 用CSS写气泡

    新学到的一个小效果 用CSS实现如下图效果,其中demo结构为:<div id="square"></div> 实现这个效果需要用到两个知识点: 1.用bo ...

  7. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

  8. CSS入门(css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影)

    一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...

  9. HTML&CSS基础-边框简写属性

    HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...

  10. CSS(五)- 背景与边框 - 边框圆角与阴影基础用法

    扩展阅读 本文仅仅做border的基础使用,想要深入了解的话可以戳以下几个链接,觉得作者写的很好. CSS Backgrounds and Borders Module Level 3 CSS魔法堂: ...

随机推荐

  1. js监听手机端点击物理返回键或js监听pc端点击浏览器返回键

    之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上 ...

  2. HTML中的清除浮动的常用方法(转载)

    以下面的div为例: HTML: <div class="test"> <div class="test1"></div> ...

  3. js获取谷歌浏览器版本 和 js分辨不同浏览器

    // 获取谷歌版本 function getChromeVersion() { var arr = navigator.userAgent.split(' '); var chromeVersion ...

  4. Nginx之使用nginx搭建简单的文件服务器

    使用nginx可以搭建简单文件服务器 安装nginx(不详述) 修改配置文件 /usr/local/nginx/conf/nginx.conf user root; /usr/local/nginx/ ...

  5. 百度的富文本编辑器UEditor批量添加图片自动加上宽度和高度的属性

    若是没有对编辑器做任何配置直接添加图片的话,显示的html内容如下图所示:它会显示出原图片尺寸 所以必须要对图片的初始显示尺寸做控制:ueditor文件中找到image.js文件 在image.js中 ...

  6. airsim 无法打开包括文件corecrt.h

    原因: 显示无法打开包括文件corecrt.h.在网上找了很多方法,最后综合起来发现,这个问题网上很多人反映,应该是vs2015的一个BUG,如果是选择"从父级或项目默认设置继承" ...

  7. python tkinter Label

    """小白随笔,大佬勿喷""" #Label标签 用于可显示文本或图片,不可编辑 import tkinter as tk #初始化窗口 w ...

  8. python基础之 while 逻辑运算符 格式化输出等

    1.while循环 while 条件: 循环体 while 条件: 循环体 else: 循环体 重点: 当条件为真的时候,就进入循环体,从上到下依次执行,执行完最后一条语句时,while并不是直接退出 ...

  9. cocos creator 动态创建精灵

    var node = new cc.Node();var sprite = node.addComponent(cc.Sprite);sprite.spriteFrame = new cc.Sprit ...

  10. HBuilder/Mui开发ios使用上拉刷新导致滚动条无法使用的解决方法

    HBuilder/Mui开发的APP使用上拉刷新,当滚动到底部是会触发上拉刷新,加载更多数据.但是ios上确是一个坑,导致滚动条无法滚动. 解决方法 放弃Mui的上拉刷新,自己使用JS实现. var ...