展开菜单

使用CSS text-shadow实现文字描边效果的代码

通过 text-shadow 属性水平、垂直阴影的偏移值可以实现文字的描边效果,兼容 Chrome 4.0+、IE10+、Firefox 3.5+、Safari 4.0+、Opera 9.6+ 浏览器,加上私有属性前缀,可能兼容的版本还可以提高,不过我没有测试。 网页效果: WWW.NEIRONG.ORG CSS: -o-text-shadow: 1px 0px 0px #f00, 0px 1px 0px #f00, -1px 0px 0px #f00, 0px -1px 0px #f00; color:#fff; -ms-text-shadow...

CSS文本居中并且两端对齐的样式属性text-align-last

CSS中 text-align:justify; 实现文本两端对齐,最后一行居左;text-align:center; 实现文本居中显示,两端不对齐。 由于 CSS 一个选择器不能使用相同的两个属性,text-align 属性也不能设置两个属性值,所以不能同时使用 justify 和 center 实现两端对齐居中显示。 要想文本两端对齐且居中显示,需要使用 justify 的附属属性 text-align-last,text-align-last 属性规定文本最后一行的对齐方式,如居左、居中、居右,该属性只有在 text-align 属性设置为 justify ...

PSD字符字重Light、Regular对应CSS font-weight的属性值参考

PSD字符字重Light、Regular对应CSS font-weight的属性值参考

css属性font-weight提供的属性值有normal、bold、bolder、lighter、100~900、inherit,而设计师提供的设计稿字符面板通常是这样的: 而且设计师用字体的字重通常不只有一种,如Thin、UltraLight、Light、Regular、Medium、Semibold、bold、Extra Bold、Heavy等,如下图: 那么如果在网页上引入字体,并设置font-weight属性值的时候,就需要使用数字值了(100 | 200 | 300 | 400 | 500 | 600 | 700 | 8...

css中引入指定字体@font-face兼容各浏览器

网页制作中,如果想使用特定的字体可以通过@font-face引用,即是解决访问用户电脑本地没有安装该字体导致不能按设计样式显示的问题。 注意: 支持@font-face的浏览器有Internet Explorer 9、Firefox Opera、Chrome和Safari,另外IE9只支持.eot类型的字体,Firefox、Chrome、Safari、和Opera支持.ttf、.otf 两种类型字体。 常规用法: @font-face { font-family: 'myFirstFont';//定义该字体名称,后面要使用该字体时,使用该名称...

CSS修改表单输入框placeholder属性文字颜色

placeholer是HTML5新增属性,规定可描述输入字段预期值的简短的提示信息,IE10+、Firefox、Opera、Chrome 和 Safari 浏览器支持该属性。 针对不同浏览器修改placeholder属性样式的代码如下 input::-webkit-input-placeholder{ color:#f00; opacity:1; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#f00; opacity:1; } input:-moz-placeholde...

利用css属性padding或margin的百分比值实现元素的高度自适应

利用css属性padding或margin的百分比值实现元素的高度自适应

外边距属性margin和内边距属性padding取百分比值的时候,无论是left、right或top、bottom,都是以其父元素的宽值(width)作为参照物(即分母top/width),这是W3C的规范,官方原文如下: Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margi...

CSS实现元素垂直居中的几种方法

网页前端经常需要把元素垂直居中,下面总结几种方法。 1、不知道元素高度,利用定位和CSS属性transform实现元素垂直居中: 代码一: parentElement{ position:relative; } childElement{ position: absolute; top: 50%; transform: translateY(-50%); } 代码二: parentElement{ height:xxx; } .childElement { position: relative; ...

解决使用overflow:scroll;样式在苹果ios上滚动卡顿

给元素使用overflow:scroll;后在苹果手机浏览器上滚动时会卡顿,解决方法是: 在overflow:scroll;滚动的容器中增加样式: -webkit-overflow-scrolling: touch; 或者给body增加: body {overflow-x: hidden} 如果body和html使用了height: 100%;就把height: 100%;去除掉。 另外: 在苹果手机上使用了-webkit-overflow-scrolling:touch;后,可能会导致使用position:fixed;固定定位的元素,随着页面...

前端移动端适配方案之rem之小白解惑

前端移动端适配方案之rem之小白解惑

移动端适配-rem: 认识移动端 做适配方案之前先认识下移动端,熟悉移动端和pc端的区别和特点,才能真正理解做适配的精髓,这里就简单介绍下; 网上找不到主流android设备的数据表,就以iphone为例: 以iphone6为例: 竖屏宽为375,叫做逻辑像素(有的地方叫独立像素); 竖屏宽的像素750,叫做物理像素,是设备实际的光点个数,要知道屏幕都是由一个一个光点组成的; 像素比(Asset)2x,就是2倍,物理像素/逻辑像素; ppi:像素密度326,实际平方英寸的光点个...

通过css修改select下拉列表框的默认样式

实现原理很简单,就是通过把浏览器默认的下拉框样式清除,自定义select样式,再把默认的下拉按钮替换为张向右对齐的小箭头图标即可,具体代码如下。 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("ht...