css新特性

简介: css新特性
  • 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
  • 弹性盒模型 display: flex;
  • 多列布局 column-count: 5;
  • 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
  • 个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
  • 颜色透明度 color: rgba(255, 0, 0, 0.75);
  • 圆角 border-radius: 5px;
  • 渐变 background:linear-gradient(red, green, blue);
  • 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
  • 倒影 box-reflect: below 2px;
  • 文字装饰 text-stroke-color: red;
  • 文字溢出 text-overflow:ellipsis;
  • 背景效果 background-size: 100px 100px;
  • 边框效果 border-image:url(bt_blue.png) 0 10;
  • 转换

            旋转 transform: rotate(20deg);

            倾斜 transform: skew(150deg, -10deg);

            位移 transform: translate(20px, 20px);

            缩放 transform: scale(.5);

  • 平滑过渡 transition: all .3s ease-in .1s;
  • 动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;


相关文章
|
12天前
|
前端开发 UED
【专栏:CSS 进阶篇】CSS3 新特性:过渡、动画与变形
【4月更文挑战第30天】CSS3的过渡、动画和变形三大特性为网页设计注入活力,创造生动丰富的用户体验。过渡提供平滑效果,常用于按钮点击等;动画实现复杂动态效果,适用于滚动字幕等;变形允许元素几何变换,如旋转和缩放。实际应用包括动态导航菜单、图片轮播和加载动画。然而,需注意浏览器兼容性、性能优化和设计平衡。掌握这些特性,将为网页设计带来更多创新可能。
|
14天前
|
前端开发 JavaScript 开发者
【Web 前端】css3的新特性有哪些?
【4月更文挑战第22天】【Web 前端】css3的新特性有哪些?
|
1月前
|
前端开发
css的特性
【4月更文挑战第11天】css的特性
12 1
|
1月前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
前端开发 容器
CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
【4月更文挑战第2天】 CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
21 10
|
2月前
|
编解码 前端开发 JavaScript
CSS3新特性
CSS3新特性
42 0
|
2月前
|
编解码 前端开发 搜索推荐
CSS3的新特性
CSS3是 CSS(层叠样式表)的最新版本,它在CSS2.1的基础上增加和改进了许多新的特性
|
4月前
|
编解码 前端开发 JavaScript
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(三)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能
|
4月前
|
前端开发 开发者 容器
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(二)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能
|
4月前
|
移动开发 前端开发 开发者
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(一)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能