CSS Day9-CSS新样式

这篇具有很好参考价值的文章主要介绍了CSS Day9-CSS新样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

9.1 背景相关属性
  • 背景图片 background-image

    url引入图片地址

    展示特点:由上到下,由左到右依次排列

  • 背景图大小 background-size

    background-size:宽 高;(相比这个最优)

    background-size:cover; 图片展示不全

    background-size:contain; 图片平铺

  • 背景平铺 background-repeat

    background-repeat:repeat-x; 水平方向平铺

    background-repeat:repeat-y; 垂直方向平铺

    background-repeat:no-repeat;不平铺(常用

    --------------------------------------以下为不常用---------------------------------

  • 背景图像相对位置 background-origin

    background-origin:padding-box; 从padding开始处的相对位置

  • 设置背景图像的起始位置 background-position

    background-position:center;

  • 背景图剪切 background-clip

    content-box 背景绘制在内容方框内(剪切成内容方框)

  • 背景图复合属性

    background:url color image position/size repeat origin clip;

9.2 边框相关属性
  • 外轮廓 outline(了解)

  • 外边框圆角 border-radius

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         .box1{
             width: 200px;
             height: 300px;
             border: 2px solid rgb(148, 208, 59);
             border-radius: 20px;
             /* border-radius: 10%; */
         }
     </style>
    </head>
    <body>
     <div class="box1"></div>
    </body>
    </html>
  • 盒子阴影 box-shaow

    四个值时 box-shaow:水平方向(正值向右) 垂直方向(正值向下) 模糊值 阴影颜色(默认黑色);

    五个值时 box-shaow:水平方向 垂直方向 模糊值 外延值 阴影颜色(默认黑色);

    六个值时 box-shaow:水平方向 垂直方向 模糊值 外延值 阴影颜色(默认黑色) 内延值;

  • resize 调整盒子的大小(了解)

9.3 渐变
  • 径性渐变 radial-gradient

    1. 调整为圆形 background-image: radial-gradient(red, yellow, green);

    2. 圆心从左上角向四周扩散 background-image: radial-gradient(at left top, red, yellow, green);

    3. background-image: radial-gradient(at 水平(50px) 垂直(100px), red, yellow, green);

    4. 调整为正圆 background-image: radial-gradient(100px,100px, red, yellow, green);

    5. 第一个值代表x轴的半径,第二个值代表y轴的半径 background-image: radial-gradient(red 50px, yellow 100px, green 50px);

  • 线性渐变 linear-gradient

    1. 默认从上到下渐变 background-image: linear-gradient(red, yellow, green);

    2. 通过to 方位词进行线性渐变 background-image: linear-gradient(to bottom left, red, yellow, green);文章来源地址https://www.toymoban.com/news/detail-806834.html

到了这里,关于CSS Day9-CSS新样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML5CSS3提高

    HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器 才支持,如果不考虑兼容性问题,可以大量使用这些新特性。 以前布局,我们基本用 div 来做。div 对于搜索引擎来说,

    2024年02月14日
    浏览(52)
  • 尚硅谷html5+css3(3)布局

    1.文档流normal flow -网页是一个多层结构 -通过CSS可以分别为每一层设置样式 -用户只能看到最顶层 -最底层:文档流(我们所创建的元素默认都是从文档流中进行排列) 2.盒子模型   1.盒子模型-边框 2.盒子模型-内边距 3.盒子模型-外边距 4.盒子模型-水平方向的布局 5.盒子模型

    2024年04月09日
    浏览(63)
  • html5和css3的新特性

    标签         !-- 高亮 mark --         !-- 摘要概述 --         details             summary                 咖啡             /summary             ul                 li拿铁/li                 li美式/li             /ul         /details           

    2024年02月11日
    浏览(42)
  • HTML5+CSS3实现小米商城 (完整版)

    对于小米商城,也是自己初学前端的一个小作品吧,这个网页大概写了有三四天吧,总体感受就是写着还行,只要有耐心,就一定能成功。 毕竟第一次做,代码写的可能比较乱,命名可能也不是太规范,以后多加改正。 基本还原了原网页,并且只用到了CSS3和HTML5。 链接:

    2024年02月04日
    浏览(49)
  • h5(html5)+css3前端笔记二

    一、表格标签 表格的主要作用: 表格主要用于 显示、展示数据 ,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 1. table/table 用来定义表格的标签

    2024年02月14日
    浏览(65)
  • 响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第1章 HTML5+CSS3初体验 项目1-1 三栏布局页面

    三栏布局是一种常用的网页布局结构。 除了头部区域、底部区域外,中间的区域(主体区域)划分成了三个栏目,分别是左侧边栏、内容区域和右侧边栏,这三个栏目就构成了三栏布局。当浏览器的宽度发声变化时,页面中左侧边栏和右侧边栏的宽度固定不变,而内容区域的

    2024年01月17日
    浏览(85)
  • 携程网移动端首页制作(html5+css3)

    主要是自己做记录,记录做的过程以及遇到的一些问题 1.首先引入normal.css(Normalize.css: Make browsers render all elements more consistently.)。其中搜索符号使用图标,阿里图标(iconfont-阿里巴巴矢量图标库):打开网址搜索需要的图标,添加到自己的项目中,点击“download code” ,下载

    2024年02月05日
    浏览(44)
  • HTML5+CSS3实现小米官网(完整版)

    小米官网其实是一个结构非常简单的网页,相比与小米商城,难度降低了很多很多。我也写过一次小米商城,可以移步到我的主页。本篇文章简单分析一下小米官网的静态结构,文章末尾附源代码和素材。 先展示一下页面的效果吧! 1. 头部导航栏 头部导航栏可以用 fixed 定位

    2024年02月13日
    浏览(82)
  • 【前端基础篇】HTML5 + CSS3 入门知识

    万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation) HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简

    2024年02月09日
    浏览(78)
  • html5和css3实现3d正方体旋转

    5.用动画keyframes让其旋转起来:

    2024年02月02日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包