css3有哪些新属性

CSS3 相较于之前版本,增加了很多新属性和特性,使网页设计更具表现力和灵活性。以下是一些重要的 CSS3 新属性和特性,按照功能分类列举:

一、布局相关

  1. Flexbox 布局

    • display: flex;
    • 常用属性:justify-content, align-items, flex-direction, flex-wrap, align-content, flex-grow, flex-shrink, flex-basis
  2. Grid 布局

    • display: grid;
    • 常用属性:grid-template-columns, grid-template-rows, grid-gap, grid-area, justify-items, align-items

二、背景和渐变

  1. 渐变背景

    • 线性渐变:background: linear-gradient();
    • 径向渐变:background: radial-gradient();
    • 重复渐变:background: repeating-linear-gradient();
  2. 多重背景

    • background-image: url(image1), url(image2);

三、边框和阴影

  1. 圆角边框

    • border-radius: 10px;
  2. 边框图片

    • border-image: url(border.png) 30 round;
  3. 盒阴影

    • box-shadow: 10px 10px 5px #888;
  4. 文本阴影

    • text-shadow: 2px 2px 5px #333;

四、动画和过渡

  1. 过渡效果

    • transition: all 0.3s ease;
  2. 动画效果

    • animation: slide 2s infinite;
    • @keyframes slide { from { left: 0; } to { left: 100px; } }

五、文本效果

  1. 自定义字体

    • @font-face { font-family: 'MyFont'; src: url('myfont.woff2'); }
  2. 文字换行控制

    • word-wrap: break-word;
    • word-break: break-all;

六、颜色和透明度

  1. RGBA 和 HSLA 颜色

    • color: rgba(255, 0, 0, 0.5);
    • color: hsla(120, 100%, 50%, 0.3);
  2. 不透明度

    • opacity: 0.8;

七、盒模型增强

  1. 盒子大小控制

    • box-sizing: border-box;
  2. 轮廓线增强

    • outline-offset: 5px;

八、媒体查询和响应式设计

  1. 媒体查询

    • @media screen and (max-width: 600px) { ... }
  2. 视口单位

    • vw, vh, vmin, vmax

九、过滤效果

  1. 滤镜效果
    • filter: blur(5px);
    • filter: grayscale(50%);

十、变换和透视

  1. 2D 变换

    • transform: rotate(45deg);
    • transform: scale(1.5);
  2. 3D 变换

    • transform: rotateX(45deg) rotateY(30deg);
    • perspective: 1000px;

总结

CSS3 引入了大量增强页面布局和视觉效果的新特性,尤其是在响应式布局、动画效果和视觉美化方面有了很大提升。作为前端开发者,掌握这些特性可以让页面效果更加生动和现代化。

相关推荐
abigale034 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者23 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile27 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399729 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊35 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火35 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能