CSS3新增UI样式

  1. 圆角,border-radius: 1-4个数字/1-4个数字,前面是水平,后面是垂直,不给“/”表示水平和垂直一样,举例如下:

    • <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <title>无标题文档</title>
          <style>      // 如果是两个数字,则左上角和右下角一样,右上角和左下角一样
              .box{width:200px;height:200px;border:1px solid #000; border-radius:20px;}
          </style>
      </head>
      <body>
          <div class="box"></div>
      </body>
    • <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <title>无标题文档</title>
          <style>
              // 100px/150px表示每个角的水平和垂直,同时可以前面四个/后面四个,则分别表示四个角的水平和四个角的垂直
              .box{width:200px;height:300px;border:1px solid #000;border-radius:100px/150px;}
          </style>
      </head>
      <body>
          <div class="box"></div>
      </body>
  2. 边框背景
    • <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <title>无标题文档</title>
      <style>
          .box{width:200px;height:60px; -webkit-border-image:url(bt_blue.png) 0 10;border-left-width:10px;border-right-width:10px;}
      </style>
      </head>
      <body>
          <div class="box"></div>
      </body>
    • 线性渐变

      <head>
          <meta http-equiv="Content-Type" content="textml; charset=utf-8">
          <title>无标题文档</title>
      <style>
          .box{width:300px;height:300px;border:10px solid #000; background-image:-webkit-linear-gradient(60deg,red,blue);}
      </style>
      </head>
      <body>
          <div class="box"></div>
      </body>
    • 可以设置多个背景

      <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <title>无标题文档</title>
          <style>
              .box{width:300px;height:300px;background:url(bt_blue.png) no-repeat, url(border.png) repeat-y right 0;}
          </style>
      </head>
      <body>
          <div class="box"></div>
      </body>
    • border-image:边框图片
    • border-image-source: 引入图片
    • border-image-slice: 切割图片
    • border-image-width: 边框宽度
    • border-image-repeat: 图片的排列方式(round 平铺, repeat 重复, stretch 拉伸)
    • border-colors:边框颜色
    • 背景尺寸: background-size: x, y (100% 100%)
    • background-origin: border | padding | content  -box,分别表示从border区域开始显示背景,从padding区域开始显示背景,从content区域开始显示背景
    • border-clip : border(从border区域向外裁剪背景), padding(从padding区域向外裁剪背景),content(从content区域向外裁剪背景)
  3. 遮罩
时间: 2024-10-08 09:47:03

CSS3新增UI样式的相关文章

css新增UI样式

一.文本新增样式 opacity 不透明度 h1{ margin: 100px auto; opacity: 0.5; } </style> </head> <body> <h1>中山大学</h1> </body> 效果 rgba透明度(选中的就透明)一般应用在背景透明,文字不透明.是rgb的一个拓展,a的值在(0,1)之间,就是针对前面的颜色的一个透明度/不透明度的描述. h1{ margin: 100px auto; color:

CSS3 新增文本样式

CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补,增加了更多的属性值,来适应复杂环境中文本的呈现. 一.定义文本阴影 二.定义溢出文本 三.文本换行 四.添加动态内容 五.恢复默认样式 六.自定义字体类型 原文地址:https://www.cnblogs.com/niujifei/p/11107982.html

CSS3新增属性css版

最近学习CSS3,以下CSS文件中的内容来自CSS手册. 可直接调用此CSS查看效果. 若有遗漏,待发现后补充进去. @charset "utf-8"; /* ------------------------- 此文档收集并介绍CSS3新增属性 ------------------------ /*----------border-color--------- 设置对象边框的颜色. --------------------- 浏览器支持:Firefox3.0+ ------------

css3新增功能

CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器 通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器 后代选择器 E F 子选择器 E>F 相邻兄弟选择器 E+F 通用兄弟选择器 E~F 1.3 属性选择器 E[attr] 选择具有att属性的E元素. E[attr="val"] 选择具有att属性且属性值等于val的E元素. E[attr~="val"] 选择具

CSS3新增功能02

1. CSS3中background新属性 1.1 background-size:直接设置图片的大小. 1.1.1 可以使用数值直接设置宽高. 1.1.2 cover:缩放图片,铺满盒子,图片的宽高比不变,会使图片某一部分伸出盒子范围. 1.1.3 contain:缩放图片,不会铺满盒子,图片的宽高比不变,在图片全部在盒子范围内的前提下,缩放图片直到图片的宽或者高达到盒子对应的值,会使盒子有一部分为空白. 1.2 background-origin:设置图片在盒子中开始显示的位置 1.2.1

CSS3新增文本属性详述

CSS文本属性复习 1.white-space:对象内空格的处理方式 2.direction:文本流的方向 3.unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示.与direction属性一起使用 1.white-space:对象内空格的处理方式 nowrap 控制文本不换行 pre 空白会被浏览器保留 normal 默认状态 pre-line 合并空白 保留换行符 pre-wrap 保留空白 正常换行 nowrap经常配合text-overflow一起使用,使得超出部分显示

CSS3新增属性text-overflow(省略符)实战开发详解

有人会问,为什么我把text-overflow拿出来单独讲解.以前,当一行内容显示不完整的时候,想要显示省略符,需要通过javascript等手段. 但是CSS3引入了text-overflow省略符属性,只需要短短一行代码就可以实现,开发方式的简洁强大不言而喻. 这篇文章,我讲带领大家做一个<今日头条>新闻导航列表,带领大家领略text-overfow的强大魅力.先看一下效果: 好了,看完了效果,现在正式开始今天的开发旅程吧! 首先我们先创建html页面,代码如下所示(红色文字即是我们Dem

CSS3新增属性text-shadow详解及燃烧的字体实战开发

今天我们有很多程序员在给文本设置样式时,都感觉无从下手.一般有两种情况: 1) 不知道关于文本到底有哪些样式属性: 2) 即使借助开发工具的自动提醒,依然不清楚样式属性的具体意思,以及具体用法. 今天这篇文章,我将带领大家一起来领受CSS3在文本样式应用方面的超强能力.通过精彩的实例,来使大家重新认识CSS3文本样式,真心希望大家通过此篇文章,即使不能做到精通CSS3的文本样式的应用,也会做到熟练应用. 实例: 如何利用CSS3制作燃烧的字体? 以前,如果我们网页上想要显示一个燃烧着的文本,大家

CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性

CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1)      id选择器(# myid) 2)      类选择器(.myclassname) 3)      标签选择器(div, h1, p) 4)      相邻选择器(h1 + p) 5)      子选择器(ul > li) 6)      后代选择器(li a) 7)      通配符选择器( * ) 8)      属性选择器