水木告白工作室:CSS3之路 (一:圆角、边框、背景)

自学于菜鸟教程网站:http://www.runoob.com/,万分感谢这个网址,非常适合学习。本文仅用于自学,整理记忆。如有侵权请告知!

CSS 用于控制网页的样式和布局。

CSS3 是最新的 CSS 标准。

一:CSS3 模块

CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。

一些最重要CSS3模块如下:

  • 选择器
  • 盒模型
  • 背景和边框
  • 文字特效
  • 2D/3D转换
  • 动画
  • 多列布局
  • 用户界面

二:CSS3 边框

用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象。

边框属性:

  • border-radius
    • 可以给任何元素制作 "圆角"。
    • 指定背景色制作圆角
      #rcorners1 {
          border-radius: 25px;
          background: #8AC007;
          padding: 20px; 
          width: 200px;
          height: 150px; 
      }
      指定边框制作圆角
      #rcorners2 {
          border-radius: 25px;
          border: 2px solid #8AC007;
          padding: 20px; 
          width: 200px;
          height: 150px; 
      }
      制定背景图片
      #rcorners3 {
          border-radius: 25px;
          background: url(paper.gif);
          background-position: left top;
          background-repeat: repeat;
          padding: 20px; 
          width: 200px;
          height: 150px; 
      }

       

    • border-radius 属性被用于创建圆角:
    • 1 div{
      2 border:2px solid;
      3 border-radius:25px;
      4 }

       

  • box-shadow
    • box-shadow 属性被用来添加阴影: box-shadow: 10px 10px 5px #888888; (左右偏移量 ,上下偏移量,阴影清晰度,阴影颜色)
  • border-image
    • border-image 属性允许你指定一个图片作为边框! 用于创建上文边框的原始图像
    • 1 div
      2 {
      3 border-image:url(border.png) 30 30 round;
      4 -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
      5 -o-border-image:url(border.png) 30 30 round; /* Opera */
      6 }

       

三:CSS3 背景

CSS3中包含几个新的背景属性,提供更大背景元素控制。

  • background-image
    • 通过background-image属性添加背景图片。

      不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。

    • 1 #example1 { 
      2     background-image: url(img_flwr.gif), url(paper.gif); 
      3     background-position: right bottom, left top; 
      4     background-repeat: no-repeat, repeat; 
      5 }

      给不同的图片设置多个不同的属性:

    •  {
          background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
      }

       

  • background-size
    • background-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。

      CSS3中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。可以指定像素或百分比大小。

      指定的大小是相对于父元素的宽度和高度的百分比的大小。

    • 1 div
      2 {
      3     background:url(img_flwr.gif);
      4     background-size:80px 60px;
      5     background-repeat:no-repeat;
      6 }

       

    • 伸展背景图像完全填充内容区域:
    • 1 {
      2     background:url(img_flwr.gif);
      3     background-size:100% 100%;
      4     background-repeat:no-repeat;
      5 }

       

  • background-origin
    • background-Origin属性指定了背景图像的位置区域。

      content-box, padding-box,和 border-box区域内可以放置背景图像。

      div
      {
          background:url(img_flwr.gif);
          background-repeat:no-repeat;
          background-size:100% 100%;
          background-origin:content-box;
      }

       

  • background-clip
    • background-clip背景剪裁属性是从指定位置开始绘制。
    • #example1 { 
          border: 10px dotted black; 
          padding: 35px; 
          background: yellow; 
          background-clip: content-box; 
      }

       

 

posted @ 2018-06-22 17:17  ThinkInPakho  阅读(142)  评论(0编辑  收藏  举报