admin 管理员组文章数量: 1086019
css 共享,css3
使用rem制作等比例缩放自适应网页，在IE浏览器下会出现页面加载完成后，使用了 rem 单位的网页元素尺寸显示异常的问题。原因是给body标签的 font-size 属性定义了固定大小的默认值，解决方法是把 font-size 属性值设置为 100%，直接删除该属性。
示例：
原代码
body {
font:normal 16px/1.875em 'Arial';
}
修改为
body {
font:normal 100%/1.875em 'Arial';
}
如果想要给网页定义默认字体大小，又不想影响rem，在bod...
2021-7-23/
69 次浏览/
通过 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...
2021-7-8/
79 次浏览/
在响应式网页开发中 object-fit 属性是极为常用的一个css属性，遗憾的是IE浏览器全系列都不支持 object-fit 属性，但是可以借助bideo.js插件实现 IE10 和 IE11 对 object-fit 的支持。
PS：不支持 IE9 和 Edge
插件下载：.js
插件使用
HTML代码：
2021-1-7/
710 次浏览/
播放音乐时，歌词会随歌曲的进度逐渐填充颜色，不是逐字改变颜色，而是从左向右横向逐个像素改变的，也就是说会出现一个字的左右两边是不同颜色的效果。
这个效果通过CSS3可以实现。
实现思路：
1、background填充一个背景颜色，以及要变化的颜色
2、-webkit-background-clip:text;裁剪出文字的背景，即是楼空文字的意思
3、-webkit-text-fill-color:transparent;把裁剪缕空的文字弄透明，这样就可以通过缕空的形状看到背景颜色，这时背景颜色就是字体的颜色
...
2020-5-29/
1250 次浏览/
vw、vh、vmin、vmax是CSS3新增的视窗单位，同时也是相对单位，它相对视窗(Viewport)大小的百分比。
什么是视窗？
视窗即Viewport，是浏览器实际显示内容的区域，不包括工具栏、地址栏、书签栏。
视窗单位说明
vw - 视窗宽度的百分比，如1vw即浏览器可视窗口宽度的1%，10vw即窗口宽高的10%
vh - 视窗高度的百分比，如1vh即浏览器可视窗口高度的1%，10vh即窗口高度的10%
vmin - 选择当前 vw 和 vh 中的最小值，最小值被均分为100单位的vmin...
2020-5-8/
1941 次浏览/
不依赖javascript，直接使用纯css实现svg的描边绘制动画效果，效果演示动画。
基础知识：
SVG中有个比较重要的属性分支stroke，中文软件中称为“描边”。和stroke相关的属性还有下面这些：
1、stroke 表示描边颜色。表示颜色的名字不是stroke-color，只是单纯的stroke。它的值官方称为“paint”，可选值的类型包括none、currentColor、。
none - 表示没有颜色；
- 表...
2019-10-18/
997 次浏览/
最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度，此时刚好回正，然后把图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层div设置visibility: hidden; 而第3层div是放图片的，需要显示出来，因此设置visibility: visible;
经过旋转肯定有超出的部分，因此对3个div都设置overflow:hidden;经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。
注意：
如果不对第3层div设置v...
2019-5-24/
2232 次浏览/
以下整理的IE9对CSS3支持情况仅限初期发布的IE9版本，其余版本由于改进或修复的原因，可能已经支持之前不支持的CSS3属性，所以以下数据仅供参考。
更准确的支持情况请访问：//cc351024(v=vs.85)
IE9对CSS3属性的支持情况：
CSS3属性
IE9支持情况
之前版本IE支持情况
...
2019-3-5/
1642 次浏览/
Flexbox 是是 CSS3 引入的新的布局模式，全称是 flexible box (意思是“灵活的盒子容器”)。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。
它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比，Flexbox 是一个更强大的方式：
在不同方向排列元素
重新排列元素的显示顺序
更改元素的对齐方式
动态地将元...
2018-9-4/
1629 次浏览/
移动端适配-rem:
认识移动端
做适配方案之前先认识下移动端，熟悉移动端和pc端的区别和特点，才能真正理解做适配的精髓，这里就简单介绍下；
网上找不到主流android设备的数据表，就以iphone为例：
以iphone6为例：
竖屏宽为375，叫做逻辑像素(有的地方叫独立像素)；
竖屏宽的像素750，叫做物理像素，是设备实际的光点个数，要知道屏幕都是由一个一个光点组成的;
像素比(Asset)2x，就是2倍，物理像素/逻辑像素；
ppi:像素密度326,实际平方英寸的光点个...
2018-6-5/
3483 次浏览/
实现原理很简单，就是通过把浏览器默认的下拉框样式清除，自定义select样式，再把默认的下拉按钮替换为张向右对齐的小箭头图标即可，具体代码如下。
select {
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border: solid 1px #000;
/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("ht...
2017-12-19/
3469 次浏览/
1 2
版权声明：本文标题：css 共享,css3 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1698532265a306985.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论