css绘图（上）：教你用CSS做一个吃豆人！！！
教你用CSS做一个吃豆人！！！ 不用ps，就用css绘制一个图形。 如图： 其实很简单，设置一个盒子的宽高为零，然后设置他周围的外边框的像素为合适的值，然后再用圆角让他变成一个圆，再然后设置左边框为透明属性，就可以得到如图。 代码如下： 来源： CSDN 作者： contour 链接： https://blog.csdn.net/qq_44706619/article/details/97290167
css边框
7种方法解决移动端Retina屏幕1px边框问题
在之前的项目中，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
移动端1px细线解决方案总结
现在的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在不同屏幕下的显示效果是一致的,
移动端如何真正实现1像素border
前些日子总被人问起 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
移动端实现1px的边框
众所周知，在移动端1px比实际的1px的要粗，那么怎么才能在移动端实现1px的边框啦？？ 看到这里，不知道有没有童鞋想到css3的一个属性，缩放 ，没错，就是缩放 ！！ 还有一个重要那就是伪元素：：after 主要是css代码如下： .border::after{ content: ''; position: absolute; top: 0; left: 0; border: 1px solid #fff; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; } 有疑问，请下方留言！！！ 来源： CSDN 作者： 吹过麦田的风 链接： https://blog.csdn.net/dq674362263/article/details/78411845
解决移动端1px边框问题的几种方法
本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。 物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素。 物理像素(physical pixel) 物理像素又被称为设备像素、设备物理像素，它是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素（参照下文田字示意图理解）。 设备独立像素(device-independent pixel) 设备独立像素又被称为CSS像素，是我们写CSS时所用的像素，它是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。 设备像素比(device pixel ratio)
盒模型 | CSS权重 | CSS层叠
*/ /*--> */ 盒模型 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
html5和css 初步学者应用笔记
HTML 超文本 标记 语言 标签：是由一对 <> 构成的，有开始、有结束。 html架构： <!doctype html> 网页的名称、网页的样式css、网页相关的js、网页的编码 书写要学习的标签（内容） 例子1： <!doctype html> hello world hello world 例子2：设置中文编码 !doctype html> hello world 哈哈哈 （1） 网页的编码 （2）网页文件的编码 标签： 块标签： 单独占一行 1.标题标签 从1到6 文字大小依次变小 2.水平线 3.段落标签 4.无序列表 5.div 布局标签 6.换行标签 行标签： 不单独占一行 7.span 标签 对文字起强调的作用 8.a标签 （1）链接 外网 内网 （2）锚链接 链接到一个确定的位置 位置 锚点 去锚点 回到顶部 (3)空链接 9.图片标签 10.音频标签 <audio src="音频的地址" autoplay controls > 11.视频标签 <video src="视频的地址" autoplay controls> CSS层叠样式表： 1.行内样式表 在标签的开始元素里面添加 style="" 属性 在style="样式名:样式值;样式名:样式值;样式名:样式值;...." 字体样式： 字体粗细 font-weight:bold; 字体大小 font
CSS 盒子模型 Box Model
CSS 盒子模型概述 element : 元素。 padding : 内边距，也有资料将其翻译为填充。 border : 边框。 margin : 外边距，也有资料将其翻译为空白或空白边。 盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。 盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型 和上面看到的图有些区别，这里把各属性支持也画出来。 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。 1、W3C的标准Box Model: /*外盒尺寸计算（元素空间尺寸）*/ Element空间高度 = content height + padding + border + margin Element 空间宽度 = content width + padding + border + margin /*内盒尺寸计算（元素大小）*/ Element Height = content height + padding + border （Height为内容高度） Element Width
CSS box-sizing
内容区域（content area ）是包含元素真实内容的区域。 内边距区域（padding area） 延伸到包围padding的边框。如果content area设置了背景、颜色或者图片，这些样式将会延伸到padding上。 边框区域（border area ）是包含边框的区域，扩展了内边距区域。 外边距区域（ margin area） 用空白区域扩展边框区域，以分开相邻的元素。 1 /* 关键字 值 */ 2 box-sizing: content-box;/*默认值*/ 3 box-sizing: border-box; 4 5 /* 全局 值 */ 6 box-sizing: inherit; 7 box-sizing: initial; 8 box-sizing: unset; 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 inherit 规定应从父元素继承 box-sizing 属性的值。 Chrome浏览器box-sizing默认是content