边框:(尺寸 样式 颜色)

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. hibernate的merge()

    映射文件中的主键如果用sequence序列,需要指定序列名,如果不指定,则会自动使用hibernate_sequence(需要自己创建) getCurrentSession()方法获得的session ...

  2. CF2A Winner

    题目描述: 在 Berland 流行着纸牌游戏 “Berlogging” ,这个游戏的赢家是根据以下规则确定的:在每一轮中,玩家获得或失去一定数量的分数,在游戏过程中,分数被记录在“名称和得分”行中, ...

  3. 百度地图API密钥

    百度地图API密钥 DD279b2a90afdf0ae7a3796787a0742e nSxiPohfziUaCuONe4ViUP2N   /*亲测可用*/ PlhFWpA02aoURjAOpnWcR ...

  4. 用友U8存货分类通过DataTable生成EasyUI Tree JSON

    <%@ WebHandler Language="C#" Class="InventoryClass" %> using System; using ...

  5. AngularJS资源合集[备忘]【申明:来源于网络】

    AngularJS资源合集[备忘][申明:来源于网络] 地址:http://blog.csdn.net/allgis/article/details/44646597

  6. Linux学习5-CentOS安装Python3.6环境和pip3

    前言 centos7 自带有 python,但是却是 python2 版本的 python,如果你想安装个python3怎么办呢? 如果直接删除python2的话,可能会引起其他的问题,因为有些东西是 ...

  7. Spring Boot事务管理(下)

    在上两篇 Spring Boot事务管理(上)和Spring Boot事务管理(中)的基础上介绍注解@Transactional. 5 @Transactional属性 属性 类型 描述 value ...

  8. Spring Boot 基于Spring Initializer 的快速构建 day02

    一.基于Spring Initializr 快速构建Spring Boot项目(快速) 备注:需要联网 这是使用Intellij Idea快速构建可以为我们省去大量的pom.xml配置时间,简单操作, ...

  9. java框架之Struts2(4)-拦截器&标签库

    拦截器 概述 Interceptor (拦截器):起到拦截客户端对 Action 请求的作用. Filter:过滤器,过滤客户端向服务器发送的请求. Interceptor:拦截器,拦截的是客户端对 ...

  10. cds view 创建和调用

    cds view 是一个core data service, 能够将数据库表虚拟化为一个虚拟表(double).因为各个使用sap的公司,使用的数据库数据是不同的,所以提供一个数据库的虚拟.  通过向 ...