又续CSS3

作者：博文_Andrew-属_394 | 来源：互联网 | 2023-08-18 13:24

这次主要讲呢1.box-sizing属性语法：box-sizing:content-box|border-box|inherit; box-sizing属性的用法box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。 1.content-box，border和padding不计算入widt

这次主要讲呢

又续CSS3

1.box-sizing属性

语法：box-sizing: content-box|border-box|inherit;

又续CSS3

box-sizing属性的用法

box-sizing属性可以为三个值之一：
content-box（default），border-box，padding-box。
1.content-box，border和padding不计算入width之内
2.padding-box，padding计算入width内
3.border-box，border和padding计算入width之内

案例：

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>box-sizingtitle>
    <style type="text/css">
    .content-box{
        box-sizing:content-box;
        -webkit-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
        }
        
    .padding-box{
        box-sizing:content-box;
        -webkit-box-sizing:padding-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: red;
        }
        
    .border-box{
        box-sizing:content-box;
        -webkit-box-sizing:border-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: pink;
        }
        
    style>

  head>
  
  <body>
           <div class="content-box">
            
        div>
            
            <div class="padding-box">
            
        div>
    
        <div class="border-box">
            
        div>
  body>
html>

效果呢考虑到浏览器的兼容性，与我们想象的不一样

又续CSS3

(兼容问题)可能会出现这样的效果

又续CSS3

2.box-shadow（盒子阴影）

语法：box-shadow: h-shadow v-shadow blur spread color inset;
取值如下：
? ? || ：
阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色
-moz-, -webkit-, -o-这些都是浏览器前缀。
常用前缀和浏览器的对应关系如下：
Firefox: -moz-
Chrome, Safari: -webkit-
Opera: -o-
IE: -ms-

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'box-shadow.jsp' starting pagetitle>
    
    <style type="text/css">
         img{
             height: 300px;
             width: 500px;
             -webkit-box-shadow:10px 5px 2px pink;
         }
      
    style>

  head>
  
  <body>
    <img src="2.jpg">img>
  body>
html>

效果(有帅哥哟)我们把阴影部分设为粉色萌萌哒

又续CSS3

3.圆角属性值

语法：
border-radius: 1-4 length|% / 1-4length|%;
注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同

border-top-left-radius      左上角
border-top-right-radius    右上角
border-bottom-right-radius    右下角
border-bottom-left-radius       左下角

圆角案例：

椭圆

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'border-radius.jsp' starting pagetitle>
    
    <style type="text/css">
           /*椭圆*/
           div{
             width: 200px;
             height: 100px;
             border: 2px solid pink;
            border-radius:100px/50px; /*水平半径,垂直半径*/
          } 

      
    style>

  head>
  
  <body>
      <div>
      
      div>
  body>
html>

又续CSS3

子弹头(我们只需设右上角和右下角的就行)

又续CSS3

圆形(只需设一个值)

又续CSS3

半月形

又续CSS3

4. CSS3 2D变形

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸

2D转换的属性名为transform，使用方法为transform:method(value)
2D转换方法有translate、scale、rotate、skew、matrix，还有基于这些分支出的translateX、scaleY等

CSS3 2D转换详解

translate() 方法：（平移）
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数。
rotate() 方法：（2D旋转）
rotate() 通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
scale() 方法：（缩放）
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。
当参数x为负值时，元素内容会横向倒置；当参数y为负值时，元素内容会纵向倒置。
skew() 方法：（斜切扭曲）
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
matrix() 方法：（变换矩阵）
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

CSS3 2D转换案例

平移：
[alt]:hover{transform:translate(20px,20px);
旋转：
[alt]:hover{transform:rotate(90deg);
缩放：
[alt]:hover{transform:scale(1.4);
斜切扭曲：
[alt]:hover{transform:skew(45deg);
多个参数：
[alt]:hover{transform:scale(1.5) rotate(90deg);

5. css3过渡

通过 CSS3，我们可以在不使用 Flash 动画或 Javascript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

CSS3过渡属性

又续CSS3

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'box.jsp' starting pagetitle>
    
    
    
    <style type="text/css">
        
            a{
                -webkit-transition:padding 1s ease-out,backgrond-color 2s linear;
            }
            
            a:hover{
                padding-left: 20px;
                background-color: pink;
            }
            
    style>

  head>
  
  <body>
          
          <a href="#">哈哈哈a><br/>
          <a href="#">哈哈哈a><br/>
          <a href="#">哈哈哈a><br/>
      
  body>
html>

6. css3动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

css3动画属性

又续CSS3

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'box.jsp' starting pagetitle>
    
    <style type="text/css">
        
            div{
                position:absolute;top:50%;
                left:50%;overflow:hidden;
                width:300px;height:150px;
                margin:-75px 0 0 -150px;
                border:3px solid #eee;
                background:#e0e0e0;
            }
            
            .one{
                 opacity:0;
                 display: block;
                 font-weight: bold;
                 height: 50px;
                 -webkit-animation:ersha 5s ease-out;
                 
             }
             
             .two{
                 opacity:0;
                 display: block;
                 font-weight: bold;
                 height: 50px;
                 -webkit-animation:doubi 5s ease-out 5s;
                 
             }
             
            @-webkit-keyframes ersha{
            
                0%{opacity:0; transform:translate(0px)}
                10%{opacity:0.2; transform:translate(20px) }
                20%{opacity:0.4; transform:translate(40px)}
                100%{opacity:1; transform:translate(100px)}
            }
            
            @-webkit-keyframes doubi{
            
                0%{opacity:0; transform:translate(0px)}
                10%{opacity:0.2; transform:translate(20px) }
                20%{opacity:0.4; transform:translate(40px)}
                100%{opacity:1; transform:translate(100px)}
            }
            
            
    style>

  head>
  
  <body>
          
          <div>
              <span class="one">111我会动哟！！！span>
              <span class="two">222我会动哟！！！span>
          div>
      
  body>
html>

如进度条一样

又续CSS3

推荐阅读

copy
Nginx使用（server参数配置）

本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]

蜡笔小新 2023-12-14 17:08:34
netty
Netty拆包粘包问题解决 —— 特殊结束符

本文介绍了解决Netty拆包粘包问题的一种方法——使用特殊结束符。在通讯过程中，客户端和服务器协商定义一个特殊的分隔符号，只要没有发送分隔符号，就代表一条数据没有结束。文章还提供了服务端的示例代码。 ... [详细]

蜡笔小新 2023-12-14 18:02:45
copy
OC学习笔记之@property和@synthesize

本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

蜡笔小新 2023-12-14 12:05:06
copy
javascript – 概述在Firefox上无法正常工作

我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观：而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]

蜡笔小新 2023-12-14 10:20:38
copy
页面请求方法参数最长_关于 HTTP GET/POST 请求参数长度最大值的一个理解误区

http:my.oschina.netleejun2005blog136820刚看到群里又有同学在说HTTP协议下的Get请求参数长度是有大小限制的，最大不能超过XX ... [详细]

蜡笔小新 2023-12-13 19:20:03
copy
计算机网络初识及通信流程分析

本文介绍了计算机网络的定义和通信流程，包括客户端编译文件、二进制转换、三层路由设备等。同时，还介绍了计算机网络中常用的关键词，如MAC地址和IP地址。 ... [详细]

蜡笔小新 2023-12-13 16:50:29
range
Python瓦片图下载、合并、绘图、标记的代码示例

本文提供了Python瓦片图下载、合并、绘图、标记的代码示例，包括下载代码、多线程下载、图像处理等功能。通过参考geoserver，使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法，供读者参考使用。 ... [详细]

蜡笔小新 2023-12-13 12:14:55
copy
[大整数乘法] java代码实现

本文介绍了使用java代码实现大整数乘法的过程，同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率，并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]

蜡笔小新 2023-12-13 11:21:32
range
Python爬虫技术基础篇面向对象高级编程（中）的多重继承

本文介绍了Python爬虫技术基础篇面向对象高级编程（中）中的多重继承概念。通过继承，子类可以扩展父类的功能。文章以动物类层次的设计为例，讨论了按照不同分类方式设计类层次的复杂性和多重继承的优势。最后给出了哺乳动物和鸟类的设计示例，以及能跑、能飞、宠物类和非宠物类的增加对类数量的影响。 ... [详细]

蜡笔小新 2023-12-12 16:19:02
node.js
Express App如何提供不需要的静态文件？

本文介绍了如何使用Express App提供静态文件，同时提到了一些不需要使用的文件，如package.json和/.ssh/known_hosts，并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]

蜡笔小新 2023-12-12 14:38:07
node.js
网页播放视频的三种实现方式

本文介绍了网页播放视频的三种实现方式，分别是使用html5的video标签、使用flash来播放以及使用object标签。其中，推荐使用html5的video标签来简单播放视频，但有些老的浏览器不支持html5。另外，还可以使用flash来播放视频，需要使用object标签。 ... [详细]

蜡笔小新 2023-12-10 13:24:30
node.js
Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施

本文详细解析了Apache Shiro 身份验证绕过漏洞 (CVE202011989) 的原理和影响，并提供了相应的防范措施。Apache Shiro 是一个强大且易用的Java安全框架，常用于执行身份验证、授权、密码和会话管理。在Apache Shiro 1.5.3之前的版本中，与Spring控制器一起使用时，存在特制请求可能导致身份验证绕过的漏洞。本文还介绍了该漏洞的具体细节，并给出了防范该漏洞的建议措施。 ... [详细]

蜡笔小新 2023-12-09 19:58:36
instance
python+selenium十：selenium的二次封装

python+selenium十：基于原生selenium的二次封装fromseleniumimportwebdriverfromselenium.webdriv ... [详细]

蜡笔小新 2023-10-17 17:28:31
instance
iptables如何添加非对称的NAT规则段的解决方法

本文介绍了如何使用iptables添加非对称的NAT规则段，以实现内网穿透和端口转发的功能。通过查阅相关文章，得出了解决方案，即当匹配的端口在映射端口的区间内时，可以成功进行端口转发。详细的操作步骤和命令示例也在文章中给出。 ... [详细]

蜡笔小新 2023-12-13 17:13:18
instance
Web学习历程记录（七）——Tomcat基本概念和配置

本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念，以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器，包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实，适合初学者了解Tomcat的基础知识。 ... [详细]

蜡笔小新 2023-12-13 17:08:24

博文_Andrew-属_394

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章