边框背景

第1章 css和文档 1，元素：替换元素（img input），非替换元素（大多数span）。 2，link：rel（代表关系：stylesheet，候选样式表：alternate stylesheet）；type（text/css）；media：（all（所有表现媒体， screen，print），title（配合候选使用）。 3，@import url(sheet1.css) 需在style内使用，放在其他css规则之前。 4，向后可访问性：<style><!-- 样式 --></style>，这样较老浏览器会将style忽略，能理解css的浏览器能正常读取样式表。 5，css注释：/* */。 第2章 选择器 1，对声明分组时，一定要在各个声明的最后使用分号。 2，p.warming.help {background:red;} 只匹配class包含warming和help的p元素，如果p包含warming和其他的则不能匹配。 3，实际上，浏览器并不检查html中id的唯一性，但这会导致编写dom更困难。 4，属性选择器：h1[class] {...} h1[class=''] {...}完全匹配 h1[class~=''] {...}部分匹配 [class^='']以什么开头 [class$='']以什么结尾 [class*='']包含什么的所有元素 *[lang|='en

01. CSS背景属性(Background) 属性与描述 　　background：在一个声明中设置所有的背景插件1 　　background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动1 　　background-color：设置元素的背景颜色1 　　background-image：设置元素的背景图像1 　　background-position：设置背景图像的开始位置1 　　background-repeat：设置是否及如何重复背景图像 02. CSS边框属性(Border和Outline) 　　属性与描述 　　border：在一个声明中设置所有的边框属性1 　　border-bottom：在一个声明中设置所有的下边框属性1 　　border-bottom-color：设置下边框的颜色2 　　border-bottom-style：设置下边框的样式2 　　border-bottom-width：设置下边框的宽度1 　　border-color：设置四条边框的颜色1 　　border-left：在一个声明中设置所有的左边框属性1 　　border-left-color：设置左边框的颜色2 　　border-left-style：设置左边框的样式2 　　border-left-width：设置左边框的宽度1 　　border-right

文章目录 背景样式 背景颜色 背景图片 图片重复方式 图片位置 图片附着 简写属性 伪类选择器 高级选择器 后代选择器 直接后代选择器 并列选择器 相邻兄弟选择器 盒子模型 边框 内边距 外边距 外边距合并 处理溢出的内容 改变元素的盒类型 浮动 背景样式 背景颜色 属性名 background-color 属性值 合法的颜色的名，比如： red ；十六进制值，比如： #ff0000 ；RGB 值，比如： rgb(255,0,0) 默认值 transparent 描述 设置背景颜色。 示例如下： .box { /* 下面 3 种写法是等价的 */ background-color : red ; background-color : rgb ( 255, 0, 0 ) ; background-color : #ff0000 ; } 背景图片 属性名 background-image 属性值 图片所在路径 默认值 none 描述 设置背景图片。 示例如下： .box { background-image : url("./cat.jpg") ; } 图片重复方式 属性名 background-repeat 属性值 repeat | repeat-x | repeat-y | no-repeat 默认值 repeat 描述 设置背景图片。 示例如下： .box { /* repeat

一、半透明边框 默认情况下背景的颜色会延伸至边框下层。在css3中我们可以设置background-clip:padding-box(这个属性的默认值为border-box)来裁剪，从而取消默认行为。 下面介绍实现半透明边框的两种方式： 1.使用rgba方式 border:10px solid rgba(255,255,255,0.5) 使用hsla方式 background:white; border:10px solid hsla(0,0%,100%,0.5); background-clip:padding-box; HSLA(H,S,L,A)的参数说明： H：Hue(色调) 0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360 S：Saturation(饱和度)。取值为：0.0% - 100.0% L：Lightness(亮度)。取值为：0.0% - 100.0% A：Alpha透明度。取值0~1之间。 二、多重边框 (1)box-shadow实现多重边框 <!--dom--> <div class="box"> </div> <!--style--> .box { background: yellowgreen; box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

使用border-radius属性: (1): (2)但是，如果你要在四个角上一一指定，可以使用以下规则： 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角 一个值： 四个圆角值相同 (3)CSS3圆角边框可指定 a:background:#-- 背景颜色 b:border:-- -- -- 边框 c:background:url(--)背景图像 （4）设置椭圆边框： 　border-radius:50% 来源： CSDN 作者： 会做饭的技术男 链接： https://blog.csdn.net/u011927449/article/details/103533107

##页面制作过程## 页面制作过程前言： <ul> <li>页面的制作过程</li> <li>如何划分区域</li> <li>划分区域中的CSS知识</li> </ul> ###页面制作过程### 由设计师设计好设计稿，再由我们前端工程师制作页面： <br>1.划分页面区域（最重要，且很复杂） <br>2.填充内容 ###如何划分区域### <ul> <li>用合适的元素来表示不同的区域(HTML)</li> <li>设置区域的位置、尺寸、背景等样式(CSS)</li> </ul> ###划分区域中的CSS知识### 每个元素都会在页面中生成一个矩形区域，CSS称该矩形区域为盒子(box) 盒子相关知识： <ul> <li>盒模型：单个盒子的组成</li> <li>视觉格式化模型：多个盒子的排列（盒子之间的相互作用和影响）</li> <li>布局：实际应用</li> </ul> ##盒模型## ###盒模型概述### ####盒子的分类#### 不同的元素产生的盒子类型可能不同，一个元素，产生什么样的盒子，取决于它CSS的display属性 <br>display:none=>不生成盒子 <br>display:innline=>行盒 <br>display:block=>块盒 <br>display:其他取值=>其他盒子 ####盒子的组成#### <br>margin:外边距

在之前的项目中，UI告诉我说我们移动项目中的边框全部都变粗了。原谅我的近视眼，为什么我看不出什么差距了，结果UI把他的设计稿跟我的屏幕截图跟我看，居然真的不一样！！！ 没有办法，只有在后面的版本中去修改了，但是要改的话，需要知道是为什么。所以查了很多资料，终于搞懂了这个问题，并且总结了几种方法。 造成边框变粗的原因 其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。 devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。 解决边框变粗的6种办法 1、0.5px边框 在2014年的 WWDC，“设计响应的Web体验” 一讲中，Ted O’Connor 讲到关于“retina hairlines”（retina 极细的线）：在retina屏上仅仅显示1物理像素的边框，开发者应该如何处理呢。 他们曾介绍到 iOS 8 和 OS X Yosemite 即将支持 0.5px 的边框： 0.5px边框 额的神呐！so easy! 果真如此吗？ 这样还不够（WWDC幻灯片通常是“唬人”的），但是相差不多。 问题是 retina

现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在那个版本没上线就迭代掉了,后面的版本针对这个问题做了些尝试, 这里总结下1px细线的处理方法 移动端1px变粗的原因 为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 这句话定义了本页面的 viewport 的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放. viewport通俗的讲是浏览器上可用来显示页面的区域, 这个区域是可能比屏幕大的. 根据这篇文章 http://www.cnblogs.com/2050/p/3877280.html 的分析, 手机存在一个能完美适配的理想viewport, 分辨率相差很大的手机的理想viewport的宽度可能是一样的, 这样做的目的是为了保证同样的css在不同屏幕下的显示效果是一致的,

前些日子总被人问起 iOS Retina 屏，设置 1px 边框，实际显示 2px，如何解决？ 原来一直没在意，源于自己根本不是像素眼…… 今天仔细瞅了瞅原生实现的边框和CSS设置的边框，确实差距不小…… 上图是原生实现，下图是 CSS 边框，手机上对比更加明显 然后，如何解决呢？搜遍整个谷歌，发现好多人早已开始研究解决方案了。到底有哪些方案，到底好不好用呢？试过才知道，把我试过的结论记录一下。 一、有说用 0.5px 解决的 在2014年的 WWDC，“设计响应的Web体验” 一讲中，Ted O’Connor 讲到关于“retina hairlines”（retina 极细的线）：在retina屏上仅仅显示1物理像素的边框，开发者应该如何处理呢。 他们曾介绍到 iOS 8 和 OS X Yosemite 即将支持 0.5px 的边框： 额的神呐！so easy! 果真如此吗？ 这样还不够（WWDC幻灯片通常是“唬人”的），但是相差不多。 问题是 retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和 之前版本，OS X Mavericks 及以前版本，还有 Android 设备。 解决方案 解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以，给元素添加个class。 if ( window

*/ /*--> */ 盒模型 CSS定义所有的元素都可能拥有像盒子一样的外形和平面空间，即都包含 边界、边框、补白、内容区域 网页中的大部分对象，实际呈现形式都是一个个盒子形状对象,页面都是由一个个盒子形状的区域拼合而成的。 盒模型关系到网页设计中排版、布局、定位等操作，任何元素都必须遵循盒模型规则。 包含： margin border padding content(内容) padding(内边距) 设定页面中一个元素内容到元素边缘（边框）之间的距离 规定了内容到达元素边缘的位置关系 规定了子元素与父元素的位置关系 注* Padding是添加在原有的大小之上的，若想保持元素大小不变，需从元素的原有大小上减去后添加的padding值 border(边框属性) 语法： border:边框宽度 边框风格 边框颜色 border-style:设定边框风格 border-style:none(无)/solid(实现)/dotted(点划线)/dashed(虚线)/double(双线) border-width:设定边框宽度 border-width:数值 单位px border-color:设定边框颜色 border-color:颜色 边框类型：（不常用属性值）groove定义3D凹槽边框 ridge定义3D垄状边框 inset outset定义3D边框（都取决于边框颜色） margin