在Web网页前端开发中使用background-attachment:fixed;样式设置背景图片固定时发现苹果手机浏览器Safari不支持CSS属性background-attachment，这着实有点意外，毕竟background-attachment是个比较老标准的CSS属性。既然不支持，那就只能使用替代方案了，比如可以通过固定定位样式position:fixed;实现。 代码很简单，CSS基础牢固的都能想到或者理解思路。 HTML代码： <div class="parent"> <div class="fixed" style=...
目前为止还没有单个css样式属性来隐藏overflow属性的默认滚动条，需要针对不同浏览器使用不同的专属css样式属性或css伪类来实现。如对于webkit内核的浏览器Chrome、Safari等使用css伪类；Firefox火狐浏览器使用scrollbar-width属性；IE 10+浏览器使用专属属性-ms-overflow-style。 Firefox浏览器 scrollbar-width 允许开发者设置滚动条出现时的厚度，可选值：auto、thin、none，支持Firefox 64+版本、Firefox for Android 64+版本 代...
制作web动画效果，通常会想到使用svg或者canvas甚至flash，其实一些简单的动画效果，使用css3属性transition就可以实现，比如动态显示矩形边框线的效果，实现原因是利用过渡效果时宽高显示的时间差。 示意图 实现代码 HTML代码： <div class="border"> </div> CSS代码： .border {position: relative; width:300px; height:300px;} .border:before, .border:afte...
通过 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:justify; 实现文本两端对齐，最后一行居左；text-align:center; 实现文本居中显示，两端不对齐。 由于 CSS 一个选择器不能使用相同的两个属性，text-align 属性也不能设置两个属性值，所以不能同时使用 justify 和 center 实现两端对齐居中显示。 要想文本两端对齐且居中显示，需要使用 justify 的附属属性 text-align-last，text-align-last 属性规定文本最后一行的对齐方式，如居左、居中、居右，该属性只有在 text-align 属性设置为 justify ...
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...
网页制作中，如果想使用特定的字体可以通过@font-face引用，即是解决访问用户电脑本地没有安装该字体导致不能按设计样式显示的问题。 注意： 支持@font-face的浏览器有Internet Explorer 9、Firefox Opera、Chrome和Safari，另外IE9只支持.eot类型的字体，Firefox、Chrome、Safari、和Opera支持.ttf、.otf 两种类型字体。 常规用法： @font-face { font-family: 'myFirstFont';//定义该字体名称，后面要使用该字体时，使用该名称...
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...
外边距属性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...
chrome浏览器下，使用jquery click()点击事件，被点击的元素会出现黄色边框： 解决方法： 给被点击的元素添加:focus的css代码：（如被点击的元素是element，代码如下 element:focus { outline:none; } 或 element:focus { outline:0; }
网页前端经常需要把元素垂直居中，下面总结几种方法。 1、不知道元素高度，利用定位和CSS属性transform实现元素垂直居中： 代码一： parentElement{ position:relative; } childElement{ position: absolute; top: 50%; transform: translateY(-50%); } 代码二： parentElement{ height:xxx; } .childElement { position: relative; ...
给元素使用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;固定定位的元素，随着页面...