css边框 | 易学教程

CSS

阅读更多关于 CSS

一、概述 CSS(Casading Style Sheet)，层叠样式表 CSS3包含大量功能，将CSS3分为多个模块。在模块定义还不太稳定的阶段，浏览器会采用厂商前缀实现某个特征。 -webkit- Apple Webkit团队，兼容Android, Safari, Chrome, BlackBerry等； -moz- Mozilla，兼容Firefox等; -ms- Microsoft基金会，兼容IE; -o- 兼容Opera, Opera Mini, Opera Mobile; 1.1 盒模型 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started/Boxes 当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成：由里向外content,padding,border,margin. 中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。 Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。

css--盒子边框 border

阅读更多关于 css--盒子边框 border

1、CSS 边框属性 border-width border-style border-color 1.1 边框样式 border-style : border-style 值: none: 默认无边框 dotted: 定义一个点线边框 dashed: 定义一个虚线边框 solid: 定义实线边框 1.2边框颜色 border-color name - 指定颜色的名称，如 "red" RGB - 指定 RGB 值, 如 "rgb(255,0,0)" Hex - 指定16进制值, 如 "#ff0000" 1.3边框-简写属性 border: 边框粗细边框样式边框颜色 border:5px solid red; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div{*/ /* width: 200px;*/ /* height: 200px;*/ /* border-width: 5px;*/ /* !*border-style: solid;*!*/ /* !*border-style: dashed;*!*/ /* !*border-style: dotted;*!*/ /* !*border-color: orange;*!*/ /*

CSS3学习笔记大全

阅读更多关于 CSS3学习笔记大全

此片文章是CSS3学习，如果要学习CSS基础，点击 CSS基础入门学习笔记目录：新增选择器属性选择器结构伪类选择器兄弟伪类目标伪类伪元素选择器盒模型颜色 RGBA HSLA 渐变线性渐变径向渐变重复渐变边框边框圆角边框阴影边框图片背景背景属性背景缩放多背景过渡 transform2D transform3D 透规(pespective) backface-visibility 动画animation Flex伸缩布局(CSS3) 容器的属性项目的属性参考手册解读指南： [] 表示可选项 | 表示或者 || 表示多选一？ 0个或1个 *表示0个或多个 {} 表示范围新增选择器属性选择器选取标签带有某些特殊属性的选择器 /* 获取到拥有该属性的元素 */ div[class^=font] { /* class^=font 表示 font 开始位置就行了 */ color : pink ; } div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */ color : skyblue ; } div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */ color : green ; } 结构伪类选择器结构伪类选择器功能描述

CSS3边框和圆角

阅读更多关于 CSS3边框和圆角

回顾CSS边框属性： border-width border-color border-style 具体见 CSS盒模型及应用。 CSS3圆角 border-radius 一个最多可以指定四个 border-*-*-radius 属性的复合属性，这个属性允许我们为元素添加圆角边框。语法：兼容性：补充：　　border-radius:50%; 　　50%相对的是元素的宽和高，如果元素是长方形则设置完border-radius成为一个椭圆形，如果元素是正方形则设置完border-radius成为一个圆形。 CSS3盒阴影 box-shadow3 设置一个或多个下拉阴影的框。语法：模糊不允许负值兼容性： CSS3边界图片 border-image 构建美丽的可扩展按钮~ 语法：各属性详解：兼容性： opera要加前缀-o- 来源： https://www.cnblogs.com/superjishere/p/12259922.html

CSS——05-核心：盒子模型1

阅读更多关于 CSS——05-核心：盒子模型1

人生苦短，要学就只学有用的【前端教学-CSS-5】 CSS核心-盒子模型盒子模型（CSS重点） css学习三大重点： css 盒子模型、浮动、定位目标：理解：能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用：能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例 1.看透网页布局的本质网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？看透网页布局的本质：首先利用CSS设置好盒子的大小，然后摆放盒子的位置。最后把网页元素比如文字图片等等，放入盒子里面。以上两步就是网页布局的本质我们明白了，盒子是网页布局的关键点，所以我们更应该弄明白这个盒子有什么特点。 2. 盒子模型（Box Model）所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。总结：盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。盒子里面的文字和图片等元素是内容区域盒子的厚度我们成为盒子的边框盒子内容与边框的距离是内边距（类似单元格的 cellpadding)

CSS盒子模型1.0

阅读更多关于 CSS盒子模型1.0

CSS盒子模型什么是盒子模型网页是由多种不同的盒子构成的，所有说盒子是网页布局的关键点盒子分为哪三个部分边框（border）内边距（padding）外边距（margin）边框border -盒子的厚度宽度border-width 样式border-style 分为4种 – 没有边框border-style：none； — 边框为单实线：border-style：solid； –边框为虚线：dashed； – 边框为点线：dotted；颜色border-color 以上内容可简写为 border：7px solid red；边框还可以分为为以下四种边框 -----border-top 上边框 ----border-bottom 下边框 -----border-left 左边框 –border-right 右边框其他用到边框的地方 —表格的细线边框 border-collapse：collapse 内边距padding — 盒子内部的距离 padding: 10px;-------上下左右都为10 padding: 10px 20px-----上下10 左右为20 padding: 10px 20px 30px----上为10 左右为20 下为30 padding: 10px 20px 30px 40 px ----上为10 右为20 下为30 左为40 注意

2.5、CSS盒子模型

阅读更多关于 2.5、CSS盒子模型

盒子模型解释元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。设置边框设置一边的边框，比如顶部边框，可以按如下设置： border-top-color:red; /* 设置顶部边框颜色为红色 */ border-top-width:10px; /* 设置顶部边框粗细为10px */ border-top-style:solid; /* 设置顶部边框的线性为实线，常用的有：solid(实线) dashed(虚线) dotted(点线); */ 上面三句可以简写成一句： border-top:10px solid red; 设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。四个边如果设置一样，可以将四个边的设置合并成一句： border:10px solid red; 设置内间距padding 设置盒子四边的内间距，可设置如下： padding-top：20px; /* 设置顶部内间距20px */ padding-left:30px; /*

盒子模型

阅读更多关于盒子模型

1 盒子 css在处理网页的时候，它认为每个元素都包含在一个不可见的盒子里。为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。 2 盒子模型一个盒子可以分为以下几个部分：内容区（content）内边距（padding）边框（border）外边距（margin） 2.1 内容区内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。通过width和height两个属性可以设置内容区的大小。 width和height属性只适用于块级元素。 2.2 内边距顾名思义，内边距指的是元素内容区和边框以内的空间。默认情况下width和height不包含padding的大小。使用padding属性来设置元素的内边距。例如： padding:10px 20px 30 px 40px;这样会设置元素的上右下左四个方向的内边距。　 padding:10px 20px 30px;分别指定上、左右、下四个方向的内边距。 padding:10px 20px;分别指定上下、左右四个方向的内边距。 padding:10px;同时指定上右下左四个方向的内边距。　

CSS之盒模型边框，内边距，外边距，阴影，圆角

阅读更多关于 CSS之盒模型边框，内边距，外边距，阴影，圆角

盒子模型盒子模型盒子模型有元素内容、边框（border）、内边距（padding）、外边距（margin）组成；盒子里面的文字和图片等元素是内容区域；盒子的厚度我们称为盒子的边框；盒子内容与盒子之间的距离是内边距；盒子与盒子之间的距离是外边距；标准盒子模型盒子边框（border） border: border-width || border-style || border-color 属性作用 border-width 定义边框粗细，单位是 px border-style 边框的样式 border-color 边框颜色 border-style ： none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线； dashed：边框为虚线； dotted：边框为点线；表格细线边框通过表格的 cellspacing="0" ，将单元格与单元格之间的距离设为 0 但是两个单元格之间的边框会出现边框，从而使边框变粗；通过设置 css 属性 table {border-collapse: collapse;} 表示相邻边框合并在一起； <style> table, th, td { border: 1px dashed #ccc; border-collapse: collspase; } </style> 内边距（padding）属性作用

2.1学习

阅读更多关于 2.1学习

今天深入学习了一下css 字符实体颜色边框颜色1 相对于使用 rgb(255,255,0)，使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能，这里的 0.5 表示透明度，范围 0~1，0 表示全透明 2.颜色英文名 3rgba RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。 4十六进制色系表字符实体体在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体 HTML 中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用字符实体。发音符号是加到字母上的一个"glyph(字形)"。一些变音符号, 如尖音符 ( ̀) 和抑音符 ( ́) 。变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。变音符号可以与字母、数字字符的组合来使用。边框 dotted: 定义一个点线边框 dashed: 定义一个虚线边框 solid: 定义实线边框 double:

订阅 css边框