css 如何实现1.5px

2024-10-28

css实现0.5px

使用缩放来0.5来实现,注意兼容各种浏览器 .frz-list li:after { content: ''; position: absolute; bottom:; height: 1px; width: 100%; background-color: #bbb; -webkit-transform: scaleY(0.5); -moz-transform: scaleY(0.5); transform: scaleY(0.5); }

css写出0.5px边框（一）

在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0.5px边框1. html部分 <div class="border">测试0.5px边框</div>css部分.border{ position: relative; color: #555; font-size: 14px; line-height: 41px;

CSS 0.5px 细线边框的原理和实现方式

细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即css中的1个像素对应物理屏幕中1个以上的像素点. 对于普通电脑,屏幕物理像素和css像素一一对应,显示的最小单位就是1px.而现在的手机,屏幕物理宽度一般都大于页面显示宽度.例如苹果6s的屏幕分辨率为1334x750像素,但是以375px的宽度显示页面,设备像素比就是750/375=2:此时在css中

css定位与position

本文同时发表于本人个人网站 www.yaoxiaowen.com 在正式讨论position之前,我们需要知道几个概念. 块元素:独占一行的元素.比如div,h1~h6,p等,它是自带换行的. 内联元素:就是和相邻的内联元素同在一行的元素,比如span,a,img,small,em之类的. 以上内容是从是否独占一行的角度来说的,从另一个角度来说,也分为两种. 替换元素:就是浏览器根据标签的属性和内容来判断具体显示的内容.input,img,textarea等属于此类,以input为例.<inpu

CSS浏览器兼容性与解析问题终极归纳

1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式.为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯. 2.IE6双边距问题:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍.例如:HTML:<div class="myDiv"></div>CSS:.myDiv{ width:100px; height:100p

css圆角矩形及去掉空格属性

css圆角矩形 -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; 去掉空格 white-space:nowrap;

移动WEBAPP开发常规CSS样式总结

我所使用到的HTML页面标签: Section,div,artical,p,ol,ul,li,header,footer,span,form,input,label,h1,h2,h3 :详细说明我就不说了,只给新手说下,为什么W3C那么多标签,只使用16个就可以把整个项目解决了? 原因是不要以为标签多,我们就一定要使用到它的,我们要的是使用广泛的,易记的. 稍微解释下,块级元素和行内元素是什么意思? 块级元素就是他占满一行的:行内元素就是他的多个同类可以同时在同一行. 下面讲解下,head标签里

LESS CSS 框架简介(转)

原文地址:http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. 作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于

【转】CSS浏览器兼容性与解析问题终极归纳

1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式.为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯. 2.IE6双边距问题:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍.例如: HTML: <div class="myDiv"></div> CSS: .myDiv{ width:100px; height:100px;

LESS CSS 框架简介

使用 LESS 简化层叠样式表(CSS)的编写 LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单.本文将通过实例,为大家介绍这一框架. 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. 作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代

css笔记04：属性选择器

1.属性选择器: 带有 title 属性的所有元素设置样式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> [title] {

CSS——LESS

去年就初次接触了LESS,并用他制作了一个Less.org的首页页面,但由于CSS的固有模式,没有让自己喜欢上他.由于前段时间学习bootstrap from twitter再次让我接触了这个Less(我在<CSS——Bootstrap From Twitter>有简单的提到过Less),又发现了他的强大与方便,于是横下心来又重新开始学习Less.这次的学习中让我发现了他的更强大,从而也让自己更喜欢上了Less.当然任何东西都有好与坏,我还是那句,他并不影响我对知识的渴望,你要是也喜欢,我们就

css编译工具Sass中混合宏，继承，占位符分别在什么时候使用

//SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @include mt(5px); } } .header { color: orange; @include mt(5px); span{ display:block; @include mt(5px); } } 1.上面是sass混合宏方法编写的sass代码,下面是编译出来的css代码 .bloc

转:LESS CSS 框架简介

原文来自于:http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. 作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对

使用CSS为图片添加边框的几种方法

css的应用十分广泛,即便用在图片的效果中也是方法多样,本文下面就介绍五种为图片添加特殊效果边框的CSS写法阴影效果通过使用带有一些padding之的背景图来添加阴影效果. HTML <img class=”shadow” src=”sample.jpg” alt=”" /> CSS img.shadow { background: url(shadow-×.gif) no-repeat right bottom; padding: 5px 10px 10px 5px; } 双边框

【转】 LESS CSS 框架简介

简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. 作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS

CSS预处理器——Sass、LESS和Stylus实践

CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风格设计的.通过设立样式表,可以统一地控制HTML(XHTML)中各标签的显示属性.可以使人更能有效的控制Web页面(或Web应用程序)外观,可以精确指定Web元素位置,外观以及创建特殊效果的能力.CSS拥有对网页对象和模型样式编辑能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言.

CSS预处理器的对比 — Sass、Less和Stylus

本文根据Johnathan Croom的<sass vs. less vs. stylus: Preprocessor Shootout>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此译文,需注明英文出处:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/,以及作者相关信息 --作者:Johnatha

优秀的CSS预处理----Less

Less语法整理本人邮箱:kk306484328@163.com,欢迎交流讨论. 欢迎转载,转载请注明网址:http://www.cnblogs.com/kk-here/p/7601058.html 个人博客地址:http://www.cnblogs.com/kk-here/ 这是本人整理的一些语法,基本上全了,至于进阶就是看你怎么组合怎么使用了;网上一些文章还谈到有js表达式,但是亲测无效,是他们随便拷贝的还是之前的版本存在过呢,这个问题我就不太清楚了.以下整理的内容都亲测有效,不放心的可以

从零开始学习前端开发 — 2、CSS基础

一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成,声明由属性和值组成. 语法: 选择符{ 属性:值; 属性:值; } 注: (1)属性和值用冒号连接 (2) 一条声明结束要添加分号 (3)属性和属性不分先后顺序 3.样式表的创建 1.内联样式(行间样式,行内样式) 语法:<标记 style="属性:值;"></标记&g

恶补web之二:css知识(1)

css指层叠样式表(Cascading Style Sheets) 样式定义如何显示html元素,样式通常存储在样式表里.把样式添加到html4.0中,是为了解决内容与表现分离的问题.外部样式表可以极大提高工作效率,外部样式表存储在css文件里,多个样式定义可层叠为一. html标签原本被设计为用于定义文档内容,由于netscape和ie不断将新的html标签和属性(比如字体和颜色属性)添加到html规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难.为解决该问题,w

css 如何实现1.5px

热门专题