这篇文章主要介绍了css实现0.5像素的边框,这里整理了详细的代码,非常具有实用价值，需要的朋友可以参考下公司的设计师在做设计图的时候都是以iphone6（宽为750物理像素）为基准进行设计的。iphone6的设备像素比（即css像素与物理像素的比例）是2，所以设计师在设计图画了边框为1px的box的时候，相对于css代码来说就是0.5像素。对于这个问题，最直观的方法就是css直接设置边框为0.5px，经过测试，iPhone可以正常显示，android下几乎...
这篇文章主要介绍了css box-shadow实现曲边阴影与翘边阴影,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧大家都知道box-shadow是h5新增属性，用来实现盒子边缘有阴影的效果，但经常会看见许多场景里阴影的样式各种各样，并不是简单的四周有阴影的效果，它们是怎么实现的呢，今天就跟大家分享两种阴影实现的方法。一、曲边阴影效果图如下：它不仅是四周有阴影，下部还有一层曲边的阴影，它的原理其实...
最近几年随着响应式布局的发展，一次开发多次使用，自适应屏幕的响应式网站的需求越来越多。但是怎样使得网站能自适应屏幕呢？这里就需要提到一个css3里面新增的技术了-media媒体查询器。那么什么是media媒体查询器呢？Media媒体查询器是CSS3新增的一个可以检测打开网站的终端的屏幕分辨率的技术。Media媒体查询器的使用方法大致如下：1.设置一个meta标签如：<meta name="viewport"content="width=device-width, initial-scale=1.0...
昨天写样式遇到个问题，如何让鼠标悬浮p后，显示p外的按钮，可以点击到按钮。效果如下：问题：在p hover时候将按钮设为display: block，这是很直接的想法，但是这有个问题，就是在悬浮出现按钮后，鼠标要移到按钮上过程中，离开了p经过间距时，按钮就会消失。解决办法：1. 选择更大区域的p这个时候hover出现的按钮，由于鼠标还在p（大区域）中，所以按钮是可以正常点到的。但这个方法问题在于扩大了触发区域，如果本意上是要最初的...
昨天写样式遇到个问题，如何让鼠标悬浮p后，显示p外的按钮，可以点击到按钮。下面通过本文给大家分享CSS鼠标悬浮p后显示p外的按钮解决方法，感兴趣的朋友一起看看吧昨天写样式遇到个问题，如何让鼠标悬浮p后，显示p外的按钮，可以点击到按钮。效果如下：问题：在p hover时候将按钮设为display: block，这是很直接的想法，但是这有个问题，就是在悬浮出现按钮后，鼠标要移到按钮上过程中，离开了p经过间距时，按钮就会消失。解决办法...
这篇文章主要介绍了css3实现一个p设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下引子以前做网页布局的时候，一个p只能设置一张背景图片，设置多个背景的话，要用多个p嵌套才能实现，这样兼容性比较好。若您的网站要求兼容浏览器低版本，建议用这种方法。css3的出现，解决了一个p只能设置一个背景的问题，使一个p可以设置多个背景图片。backgroun...
这篇文章主要介绍了CSS position属性和实例应用演示,absolute（绝对定位）,relative（相对定位）,relative与absolute的结合使用以及fixed(固定定位),需要的朋友可以参考下目前几乎所有主流的浏览器都支持position属性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE浏览器，IE9、IE10还没测试过），以下是w3school对position五个值的解释：其中absolute和relative是最常用的，fixed用得也比较多（其中IE6并不支持fixed）...
今天要实现的内容如下图所示：有了css3的动画属性，实现起来非常的简单。html布局：<p class="pointer"><p></p> </p>让.pointer的p放在你想要他显示方，p放的是指针箭头图的地片，而.pointer的p是盒子，因为裹这个箭头的盒要实现向上移动的效果，所以p的高度要比箭头高度高出10px。css样式：.pointer{position: absolute;height: 3.8rem;bottom: 3rem;width: 100%; } .pointer p{animation: anima-pointer 2s infinite;position: a...
1.通读了下w3cschool上的简介：CSS3 box-sizing 属性_w3cschool。2.看简介理解的不够深刻，偶属于刚看完转眼就能忘记的人。出于对自己的不放心，还是老老实实把例子拿到线下看看：<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.container {width:30em;border:1em solid;}.box {box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */width:50%;border:1em solid red;float:left;...
以前我们都是用JS来实现字母的首字母大小写的，但现在没有必要了，CSS完全可以实现，话说兼容性还好从IE6开始就支持了。text-transform：none | capitalize | uppercase | lowercasenone：无转换capitalize：将每个单词的第一个字母转换成大写<style>#box{text-transform:capitalize;} </style> <p id="box">css javascript html5</p>uppercase：将每个单词转换成大写#box{text-transform:uppercase; } <p id="box">css javascript...
每次使用box-shadow,都要查阅资料才能实现对应的效果,现在总结一下,方便以后查看。一、语法： E {box-shadow: inset x-offset y-offset blur-radius spread-radius color}; E {box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}; 二、取值： 1. 阴影类型：此参数可选，默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影； 2.X-offset:是指阴影水平偏移量,其...
一、在平常的应用中很少关注CSS direction的使用，今天偶尔看到相关内容，才发现CSS direction使用起来很多时候很方便。二、首先我们需要关注两个重要的内容:direction:ltr;//这个是默认值 direction:rtlltr是初始值，表示left-to-right，就是从左往右的意思.rtl则是另外一个值，right-to-left缩写，就是从右往左的意思。<p class="rtl"><img src="1.png"/><img src ="2.png"/> </p>如果给p设置direction为trl属性，则1.png就会在右...
vertical-align的定义W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。文本通常根据不可见的基线进行对齐的，而字母的底部位于基线之上。vertical-align属性可以在文字的基线之上或之下提升或降低字母或图像。vert...
1.元素的margin-top、margin-bottom及padding-top、padding-bottom使用百分比作为单位时，其是相对父元素的宽度width，而不是我们想象的高度height；如图<style type="text/css">.parent{outline: 1px solid orange;width: 200px;height: 300px;padding: 10px;margin: 10px;}.child{outline: 1px solid purple;width: 200px;height: 80px;padding-top: 10%; /*20px = 父容器的width值200px * 10% */padding-bottom: 5%; ...
writing-mode属性 最初只是ie中的属性，只有ie支持，现在在css3中谷歌，火狐也开始支持。所以使用的时候就需要记住两套不同的语法，ie的私有属性和css3的规范属性如果只需要兼容到ie8+就可以只使用css3的规范属性就可以了css3：writing-mode:horizontal-tb;//默认：水平方向，从上到下writing-mode: vertical-rl;//垂直方向，从右向左writing-mode: vertical-lr;//垂直方向，从左向右ie私有属性：主要的:writing-mode: lr-tb ;//从...