css3
-
CSS3多列的三种实例介绍
这篇文章主要为大家详细介绍了css3多列的三种实例的相关资料,需要的朋友可以参考下 CSS3多列实例1： CSS3 列规则 .newspaper{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrom…
-
css3新特性应用之视觉效果详细解读
目录 padding 背景与边框第一部分 背景与边框第二部分 形状 视觉效果 字体排印 立即学习“前端免费学习笔记（深入）”； 用户体验 结构与布局 过渡与动画 源码下载 一、单侧阴影 box-shadow属性的应用，格式：h-shadow v-shadow blur spread color in…
-
用css3简单的制作3d半透明立方体图片详解
new document //css部分html{font-size:62.5%;}img{width:300px;height:300px;} #stage{//搭建一个舞台margin-top:200px;margin-left:auto;margin-right:auto;width:300p…
-
CSS3复杂选择器的详解
今天把视频里的CSS3复杂选择器部分看完了，来整理一下学到的知识点。 1、兄弟选择器：同一位置级别，可称为兄弟元素 a、相邻兄弟选择器：next紧紧跟在【当前元素之后的】(一个)，指定选择器的元素 语法：通过“+”作为结合符eg: p+p ->紧跟在p后面的p元素 这是第一…
-
使用CSS3仿微信聊天小气泡的实例介绍
今天给大家分享一个我刚做的项目中的一个小案例， 因为我们在做一个聊天的功能，之前的聊天页面ui很丑，我就不在这里展示给大家了。 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面。 首先给大家看看页面的样子吧，如下图所示： 小月博客仿微信聊天界面 立即学习“前端免费学习笔记（深入）”； 页面…
-
利用CSS3实现进度条的两方法介绍
这篇文章主要给大家介绍了利用css3实现进度条的两种姿势，文中给出了详细的示例代码和图文介绍，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。 效果图如下： 第一种姿势如下 先上代码 /*对应CSS*/ #progress{ width: 300px; height: 30px; …
-
使用css3的ie写法示例
这篇文章详解使用css3的ie写法示例 linear-gradient background: linear-gradient(to bottom, #97c1e0 0%, #086cb6 100%);filter: progid:DXImageTransform.Microsoft.Gradien…
-
关于CSS3阴影使用方法介绍
一、边框阴影 标准语法： box-shadow : h-offset v-offset blur spread color [ inset ] ，… [ 偏移量向右下为正值，左上为负值 ] a、若有多重阴影，用逗号分隔，且依次往下叠加，最先写的在最上面 b、若有inset，…
-
详解CSS3页面布局浏览器兼容与前端性能优化方法
css如何垂直居中一个元素的问题已经是一个老生常谈的问题了。不管对于一个新手或者老手，在面试过程中是经常被问到的。前两天在看一个flex的视频教程，当中提到了有关元素的居中问题，所以今天小编就来扒一扒几种常见的方式。不足之处请大家批评指正（所有的代码都是自己亲手敲过可用的） 1、水平居中（margi…
-
CSS3新特性绘制常见图形方法介绍
前言：最近准备做一个自己的网页，设计稿中导航我准备设计成矩形，也有hover样式展示的矩形，当中一些头像等等。以前除了画圆，好像真没认真画过其他图形，今天就画画我们常见到的几个图形。 在此之前我们有必要了解下什么是伪元素(和它不同的，还有一个概念叫伪类，两者容易混淆)，没有它画不成图形的。 a）伪元…
