51Dev开发社区
登录 注册

#cSS3

CSS3 transition 浏览器兼容性
1、兼容性根据canius（http://caniuse.com/#search=transition），transition 兼容性如下图所示：  1<!DOCTYPEhtml>2<html>3<head>4<style>5div6{7wi...
代码星球 代码星球·2021-02-14

CSS3立体文字最佳实践
前端开发whqet,csdn,王海庆,whqet,前端开发专家上一篇的《纯CSS3文字效果推荐》文章里面推荐了8款纯css实现的文字效果，当中3d文字效果最为流行，限于篇幅只展示了其3D实现原理，没有考虑代码的复用性和可移植性。今天来补充下。顺便领略sass的强大功能，请大家摩摩拳擦擦掌。开工咯！案例效果还是在code...
代码星球 代码星球·2021-02-13

CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）
CSS不像其它高级语言一样支持算术运算、变量、流程控制与面向对象特性，所以CSS样式较多时会引起一些问题，如修改复杂，冗余，某些别的语言很简单的功能实现不了等。而javascript则是一种半面向对象的动态语言，有java的影子，有C的味道，中间有比其它语言多的糟粕，使用预处理办法可以解决这些问题。其中Less[les...
代码星球 代码星球·2021-02-12

CSS3与页面布局学习总结（五）——Web Font与Sprite
webfont是应用在web中的一种字体技术，在CSS中使用font-face定义新的字体。先了解操作系统中的字体：a）、安装好操作系统后，会默认安装一些字体，这些字体文件描述了每一个文字的形态，一般中文文件大，英文文件小，因为中文字符数多；在控制面板中可以找到文字文件夹，在C:WindowsFonts下也可以直接找到...
代码星球 代码星球·2021-02-12

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法
BFC（BlockFormattingContext）即“块级格式化上下文”，IFC（InlineFormattingContext）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内...
代码星球 代码星球·2021-02-12

CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset
盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是ie盒子模型和标准w3c盒子模型，加上了doctype声明，让所有浏览器都会...
代码星球 代码星球·2021-02-12

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位
web前端开发者最最注的内容是三个：HTML、CSS与JavaScript，他们分别在不同方面发挥自己的作用，HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用，有点“SRP单一职责”的意思，如字体大小应该是CSS控...
代码星球 代码星球·2021-02-12

HTML5与css3权威指南（一）
doctype声明：<!DOCTYPEhtml>字符编码：<metacharset="utf-8"> 不允许写结束标记：area,base,br.col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr...
代码星球 代码星球·2021-02-09

CSS3之body背景图平铺
你再也不需要因为屏幕大小不同而去选择多张图片作为背景图了，css3教你做人；body{background:url('xx.jpg')topcenterno-repeat;background-size:cover;}  或者body{background:url('back.jpg');backg...
代码星球 代码星球·2021-02-08

移动端轮播完整版css3加原生写法
<!doctypehtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,max...
代码星球 代码星球·2021-02-08

css3爆炸轮播效果
<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><title>爆炸效果轮播</title><style>*{margin:0;padding:0;}ul,ol{lis...
代码星球 代码星球·2021-02-08

心形陀螺案例css3
<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><title>Title</title><style>body{background:#000;}.box{width...
代码星球 代码星球·2021-02-08

圆周运动的css3特效案例
<!doctypehtml><htmllang="zh-cn"><head><metacharset="UTF-8"><title>圆周运动的css3特效</title><style>.box{width:300px;height:30...
代码星球 代码星球·2021-02-08

css3的各种属性的讲解
　　1.渐变（gradients）　　　　水平渐变：lineargradient　　　　语法：background:linear-gradient(direction,color1,color2);　　　　　　direction介绍：　　　　　　　　1.这个参数可以省略，默认方向从上到下；　　　　　　　　2.这个阐述如...
代码星球 代码星球·2021-02-08

无缝轮播的案例 及css3无缝轮播案例
　　无缝轮播的案例：　　<!DOCTYPEhtml>　　<html>　　<head>　　　　<metacharset="UTF-8">　　　　<title>无缝轮播</title>　　　　<style>　　　　　　*{　　　　　　　　m...
代码星球 代码星球·2021-02-08
首页上一页12345...下一页尾页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他