css边框

w3c搬运CSS念念碎 基本使用 当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。 如果值为若干单词，则要给值加引号 p { font-family: "sans serif"; } 是否包含空格不会影响 CSS 在浏览器的工作效果,不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。 选择器 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 { color: green; } body { font-family: Verdana, sans-serif; } 通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。 id选择器：#id名 在现代布局中，id

暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》，里面有很多有意思的CSS技巧，有时间有兴趣的朋友可以去读读这本书，读完之后我们可以一起交流，学习，一起解答你我的迷惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳： 有问题欢迎讨论 sunseekers 本文所有链接均来自《CSS揭秘》，内容基本都来自原书 css编码技巧 尽量减少代码重复的重复，尽量减少改动时要编辑的地方，易维护，性能高； 使用css变量，currentColor,inherit...目前css变量很少，兼容性有待改善 响应式网页设计，每个媒体查询都会增加成本；避免媒体查询 使用百分比长度来取代固定长度,或者使用与视口相关的单位（vw,vh,vmin,vmax)，她们的值解析为视口宽度或高度的百分比 当你需要在较大分辨率下得到固定宽度， 使用max-width代替width

Css介绍 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 Css笔记 字体相关属性： font (字体) color (颜色) font- (字体-加粗) font-size (字体-大小) font-weight (字体-类型) text-shadow (文本的阴影效果) line-height (行间的距离,行高) letter-spacing (字体间的距离) text-align (文本-水平对齐) direction (内容显示方向) 背景相关属性： Background (背景) background-attachment (固定到背景) background-color (背景-颜色) background-image (背景-图片) background-position (背景-图片-位置) background-repeat (背景-是否及如何重复背景图像) background-size (背景-大小) 边框相关属性： border (边框) border-color (边框-颜色) border-style (边框-样式) border

纯CSS实现圆角框是一件大家都说烂了的事件，我也写过两篇总结文章，为什么还会有这篇文章呢，事情是这样的。在我们的以前的项目中，实现圆角框往往是用背景图片来实现的，但是，当这些项目发布上线后，在维护过程中，有时需要添加一些新的需求，因为以前的项目中大量采用了圆角图片，并且这些图片全部采用了CSS sprites方式合并的图，为了不增加更多的额外工作，并且也不想用JS来添加更多的http请求，所以需要一些简单的CSS方案来解决这个问题。而我的个人爱好，也喜欢采用无图片的方式来处理这些效果。总觉得CSS能完成的工作，为什么不让它来实现呢？ 实现原理： 纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了，下面这个示意图是我将其中的一个圆角进行放大后的效果。 图一 从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次递减。因此根据这个原理我们可以实现简单的html结构和样式。 1、Html结构层： <div class="sharp color1"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4">

CSS的简述 1.什么是CSS Cascading Style Sheet 层叠级联样式表 CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的,应用优先级高的，不冲突的样式规则共同作用。 2.CSS的优势 内容和表现分离 网页结构表现统一，可以实现复用 外 样式十分的丰富 建议使用独立于html的css文件 利用SEO，容易被搜索引擎收录！ 3.CSS的发展史 CSS1.0 CSS2.0 DIV（块） + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO CSS2.1 浮动，定位 CSS3.0 圆角，阴影，动画…. 浏览器兼容性~ CSS的使用方式 1.内联样式：把CSS样式嵌入到html标签当中，类似属性的用法 <h1 style= "color:red;" >我是标题</h1> 好处:可以单独什么某个元素样式，缺点：不利于样式重用 2.内部样式：在head标签中使用style标签引入css <style> h1 { color : green ; } <

table中的tr的默认display:table-row，虽然可以修改为display：block但是就失去了tr特有的显示效果，如(td自动对齐)； 并且在tr中对起设定padding是有用的，可以增加内边距，但是设定margin是没有用的，tr的外间距依然是0； 解决方案： css的两个属性：border-collapse:collapse / separate & border-spacing:10px 10px； 需要用border-collapse & border-spacing联合控制tr的间距； 如： 123 < table style = "border-collapse:separate; border-spacing:10px;" > < tr ></ tr > </ table > table中设置tr行间距 CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框 值 描述 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 inherit 规定应该从父元素继承 border-collapse 属性的值。 border

css总结 文字属性 color可以定义字体颜色 font-size: 字体大小 font-weight:字体粗细 normal: 默认值，标准粗细 bold: 粗体 bolder: 更粗 lighter: 更细 100~900: 设置具体粗细，400等同于normal，而700等同于bold inherit: 继承父元素字体的粗细值 font-style: 字体风格 normal： 默认值，浏览器会显示标准的字体样式 italic： 浏览器会显示斜体的字体样式 oblique：浏览器会显示倾斜的字体样式 font-family: 字体 综合: {font:font-style font-weight font-size/line-height font-family;} 其他属性可以省略，必须保留font-size和font-family属性 外观属性 line-height:行间距 行间距=weight,可以设置水平居中 text-align:水平对齐方式 left 左对齐，默认值 right 右对齐 center 居中对齐 justify 两端对齐 text-decoration:文字装饰 none 默认。定义标准的文本 underline 定义文本下的一条线 overline 定义文本上的一条线 line-through 定义穿过文本下的一条线 inherit

本文最初发表于 博客园 ，并在 GitHub 上持续更新。以下是正文。 盒子模型 前言 盒子模型，英文即box model。无论是div、span、还是a都是盒子。 但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。 盒子中的区域 一个盒子中主要的属性就5个：width、height、padding、border、margin。如下： width和height： 内容 的宽度、高度（不是盒子的宽度、高度）。 padding：内边距。 border：边框。 margin：外边距。 盒子模型的示意图： 代码演示： 上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。 注意： 宽度和真实占有宽度，不是一个概念！ 来看下面这例子。 标准盒模型和IE盒模型 我们目前所学习的知识中，以标准盒子模型为准。 标准盒子模型： IE盒子模型： 上图显示： 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： width和height： 内容 的宽度、高度（不是盒子的宽度、高度）。 padding：内边距。 border：边框。 margin：外边距。 CSS盒模型和IE盒模型的区别： 在 标准盒子模型 中，

当对文档进行布局时，浏览器渲染引擎会根据css-Box模型（CSS Basic Box model）将所有元素表示为一个矩形盒子。CSS决定这些盒子的大小，位置以及属性（颜色，背景，边框尺寸） 标准盒模型 从外向内依次为： Margin + border + padding + content-width 外边距区域 margin area 用空白区域扩展边框区域，以分开相邻的元素。它的大小为 margin-box 的高宽。外边距区域大小由 margin-top , margin-right , margin-bottom , margin-left 及简写属性 margin 控制。 边框区域border area 是包含边框的区域，扩展了内边距区域。它位于边框边界内部，大小为 border-box 宽和 border-box 高。由 border-width 及简写属性 border 控制。 内边距区域padding area 延伸到包围padding的边框。如果 内容区域content area 设置了背景、颜色或者图片，这些样式将会延伸到padding上(译者注：而不仅仅是作用于内容区域) 。 它位于内边距边界内部, 它的大小为 padding-box 宽与 padding-box 高。 内容区域content area 是包含元素真实内容的区域。它通常包含背景

要求：第一个按钮是选中的状态，点击按钮变背景色 效果图： 点击前： 点击后： 先写一个简单的按钮样式 <template> <div> <button class="btn1">按钮1</button> <button class="btn2">按钮2</button> </div> </template> <script> export default { data() { return {}; }, methods: {} }; </script> <style scoped> .btn1 { width: 72px; height: 20px; border: 1px solid #d9d9d9; border: 0; outline: none; } .btn2 { width: 72px; height: 20px; border: 1px solid #d9d9d9; border: 0; outline: none; } </style> 然后在需要写点击之后的样式和逻辑代码： 加一个三元表达式和样式，以及点击事件 <button class="btn1" @click="btn1data()" :class="showmode ? 'active' : 'btn1'" > 按钮1 </button> <button class="btn2" @click=