border中thin和1px

2026-08-08

深入理解之css中的border属性

1. border-width:不支持不百分比 1)受本身的使用场景决定. 例子:左边为手机,右边为显示器,但是他们边框的宽度是差不多的,不会因为设备大就让边框宽度变大. 2. border-width:还支持关键字(thin=1px medium=3px thick=5px) 但是border中最常用的却是thin 为什么他的默认属性为3px? border-style:double的默认属性为三像素. 3.border-style:double 1)border-style: solid

border边框设置为1px

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table{ width:600px; border-collapse: collapse; /*表示边框合并在一起.*/ } </style> </head> <bod

关于css中的border

我一直以为css中的border是正方形的像这样因为我平时用的时候都是 border:1px solid #000,都是同一个颜色所以看不出来当我给每一个边分别设置颜色的时候才发现他们是以梯形分布的,border中的top right bottom left 是以梯形显示的,如果此时你给div设置宽高为0的话他们就变成三角形了

1px的border

css中是这样写的: div{ border-bottom: 1px solid #dfe5e4; } 但在手机上,像素比不为 1 ,由于 webview 的灰度渲染, border 一般会显示为 2-3px 如何使手机上的 border 也显示为 1px ? 尝试了 div{ background: url(xxx.png) 0 bottom repeat-x; background-size: auto 10px; }其中xxx.png为一张 1x20 的图片,仅有最下面的 1x1 为有色,

javascript 技巧总结积累（正在积累中）

1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 <input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onblur="if (value=='') {value='郭强'}">点击时文字消

css深入理解之 border

一 border-width不支持百分比值 1 不符合客观逻辑 2 w3成都一种约定吧 3 边框本身就像是一个包裹内容的界限类似的还有outline,box-shadow text-shadow均不支持百分比 4 边框宽度的枚举 thin:1px medium(默认):3px 因为border-style:double这个样式至少需要3px才会有可视化显示效果, thick:5px 二 border-style类型 1 solid 2 dashed 虚线虚线在chrome firefox的

来看看css3中的box-shadow

不谈IE,只谈谈box-shadow的具体使用方法语法: E {box-shadow: <length> <length> <length>?<length>?||<color>} 也就是: E {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 换句说: 对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜

深入理解css中的margin属性

深入理解css中的margin属性之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”.这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间应用(重点) margin--margin值的单位为%时的几种情况第一部分:margin--基础知识要介绍margin的基础知识,我们不可回

负margin在布局中的运用（*****************************************************************）

一.左右栏宽度固定,中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>左右栏宽度固定,中间栏宽度自适应</title> <style> body{ margin: 0; padding: 0; min-width:600px; color: #fff; font-weight:

js中的各种宽高以及位置总结

在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之间实现方式不同,常常会造成概念混淆,经过研究之后,这里来进行一个总结. 第一部分:DOM对象 1.1只读属性所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和client

JavaScript中的各种宽高以及位置总结

JavaScript中的各种宽高以及位置总结在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之间实现方式不同,常常会造成概念混淆,经过研究之后,这里来进行一个总结. 第一部分:DOM对象 1.1只读属性所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如

web前端开发中的浏览器兼容性总结

1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象:但在IE中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候,则需要在div块的

利用border和伪类画出三角形 ps：好久没写博客了。。。

有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的部分已经过去了,于是乎,小哥我满血复活,继续在前端中挥舞着大宝剑,砍怪升级. 之前看极客学院的幽灵按钮视频,发现了他们在做tooltip提示框的时候,利用span标签在div下方定位一个小的三角形,至于形状的做法,利用border来实现.具体做法是:以向下三角形为例,将span的border设一个高

使用border-image实现类似iOS7的1px底边

使用border-image实现类似iOS7的1px底边 iOS7已经发布有一段时间,扁平化设计风格有很多值得称赞的地方,其中有很多设计细节都是值得研究的. 首先,来看下面iOS设置的截图中的border: 从上面的截图可以看到iOS7的设计是非常精细的,border是一根非常细的线.这篇文章将说明如何使用border-image实现iOS7的border效果. 在看下面的内容之前,需要先了解devicePixelRatio和border-image,不熟悉的同学请自行脑补: 设备像素比devi

CSS之 border 属性

特性 border-width 不支持百分比 border-color 默认颜色是 color border-color 透明值的作用:可利用增加可点击区域,利用内阴影做边框 border 应用: 坐等高布局,不支持百分比宽度支持的关键字: thin(细 1px) medium(默认 3px) thick(厚 5px) 类型(仅介绍有差别的几个) solid : 实线 dashed: 虚线 {chrome: 3:1; IE: 2:1} dotted: 点线 {chrome/fixrf

移动端1px问题处理方法

在做移动端开发时,设计师提供的视觉稿一般是750px,当你定义 border-width:1px 时,在iphone6手机上却发现:边框变粗了.. 这是因为,1px是相对于750px的(物理像素),而我们定义的1px是相对于375px的(css像素)“实际上应该是border-width:0.5px”. 解决方法: 1.border-image 图片实现在使用 border-image 时,将border设计为物理1px,如下: .border-image-1px { border-widt

移动端1px的解决办法之styled

做项目的时候总结了一个styled中解决移动端项目1px像素线的问题,封装了一个函数,大家可以直接使用,很方便. 1 import styled from 'styled-components' const border = ({ component=null, width='1px', style='solid', color='#ccc', radius=0 }) => { return styled(component) ` position: relative; border-width

1px解决方案--集锦

没有废话,直接上代码汇聚各种版本,持续更新中.... 1.sass @charset "utf-8"; /** * @module 背景与边框 * @description 为元素添加边框(包括1px边框) * @method border * @version 2.0.0 * @param {String} $border-width 指定边框厚度(单位为px),默认值:1px,取值与`border-width`属性一致,不同方向代表边框位置 <2.0.0> * @pa

python学习笔记——爬虫学习中的重要库urllib

1 urllib概述 1.1 urllib库中的模块类型 urllib是python内置的http请求库其提供了如下功能: (1)error 异常处理模块 (2)parse url解析模块 (3)request 请求模块 (4)robotparser robots.txt解析模块 1.2 模块的引用方式以下应用引用urllib库中的模块时均以 parse模块为例 (1)引用方式一(正确) import urllib from urllib import parse (2)引用方式二(正确)

Retina屏的移动设备如何实现真正1px的线

前些日子总被人问起 iOS Retina 屏,设置 1px 边框,实际显示 2px,如何解决?原来一直没在意,源于自己根本不是像素眼……今天仔细瞅了瞅原生实现的边框和CSS设置的边框,确实差距不小…… 上图是原生实现,下图是 CSS 边框,手机上对比更加明显然后,如何解决呢?搜遍整个谷歌,发现好多人早已开始研究解决方案了.到底有哪些方案,到底好不好用呢?试过才知道,把我试过的结论记录一下. 有说用 0.5px 解决的在2014年的 WWDC,“设计响应的Web体验” 一讲中,Ted O’Co

border中thin和1px

热门专题