用shape-outside实现文字环绕

  • 实现效果：

  • 介绍：shape-outside是让文字从图片外部开始环绕，以及设置图片的形状。
  • 函数定义：
  1. circle(size at x y);用于制作圆形size可以是%,px,rem,v*
  2. ellipse(size);用于制作椭圆形
  3. inset(top,right,bottom,left,round);矩形 前四个参数可缩写如padding格式
  4. polygon(x1 y1,x2 y2,x3 y3);多边形
  5. url();从图像中提取形状，图像限于透明图片
  • Html代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="circle.css">

</head>

<style>

    .block{

        width: 300px;

        height: 50px;

        margin: 20px auto;

    }

    .img{

        width: 200px;

        height: 200px;

        float: left;

        shape-outside: circle();

        clip-path: circle();

        background-color: pink;

    }

</style>

<body>

<div class="block">

    <div class='img'>

    </div>

    <div class="font">加好久好久好久好久好久考核计划的回复我会和符号位胡吴海

        峰吴红红芜湖和黑偶然黑哦温和的齐全哦我和叫哦后和皇后和同和和和和阿斯蒂

        芬基本都是看不出窗口事件笔记本求</div>

</div>

</body>

</html>

注意：clip-path 属性可以将元素裁剪为基本形状或 SVG 源。

CSS色彩渐变

  • 介绍：conic-gradient() 函数，创建一个由渐变组成的图像。

    圆锥渐变是颜色过渡围绕中心点旋转，而不是从中心向外辐射。创建圆锥渐变至少需要设置两个色标。

彩虹圆盘

  • 实现效果：

  • Html代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="circle.css">

    <style>

        .block{

            width:200px;

            height:200px;

            border-radius:100px;

            background:conic-gradient(red 0deg,red 30deg,orange 30deg,orange 180deg,yellow 180deg,yellow 360deg);

        }

    </style>

</head>

<body>

<div class="block">

</div>

</body>

</html>

饼图

  • 实现效果：

  • html代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="circle.css">

    <style>

        .block{

            width:200px;

            height:200px;

            border-radius:100px;

            background:conic-gradient(red 0deg,red 30deg,orange 30deg,orange 180deg,yellow 180deg,yellow 360deg);

        }

    </style>

</head>

<body>

<div class="block">

</div>

</body>

</html>

注意：red 0deg,red 30deg指的是红色是从多少度到多少度。

指定背景如何附着在容器上

  • 介绍：使用background-attachment属性。
  • 属性值：
值 描述
scroll 背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。
local 背景图片会随着元素内容的滚动而滚动。
initial 设置该属性的默认值。
inherit 指定 background-attachment 的设置应该从父元素继承。

长度单位vh

  • 介绍：实现根据视口的高度，自适应某一部分的高度，表示相对视口高度。视口被均分为100单位的vh，即1vh = 1% * 视口高度。可以用来解决主体内容不足以撑起视口的剩余高度时，页面底部留白太多的问题。

　　如：width:10px，可改成width:10vh。

用shape-outside实现文字环绕、CSS圆锥色彩渐变、指定背景在容器上如何附着、长度单位vh的更多相关文章

  1. （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  2. 《css揭秘》下（伪元素，文字背景，垂直居中技巧，文字环绕）

    本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...

  3. css文字环绕图片--遇到的问题及解决方法

    一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:3 ...

  4. HTML/CSS实现文字环绕图片布局

    原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...

  5. html小知识点汇总（浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class，针对特定的标签进行修改）

    1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...

  6. Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

    本篇主要包括: ■  添加独立的一行■  文字环绕■  图片自适应■  隐藏元素 添加独立的一行 在id为body的section和id为main的section之间,添加2张图片. 我们发现,新加的 ...

  7. CoreText实现图文混排之文字环绕及点击算法

    系列文章: CoreText实现图文混排:http://www.jianshu.com/p/6db3289fb05d CoreText实现图文混排之点击事件:http://www.jianshu.co ...

  8. wps如何设置文字环绕图片

    wps在编辑一些文字的时候,经常会插入一些图片,但是插入图片后,文字和图片就被分离开来,整体显得没有那么美观整洁,这个时候就用到了软件的文字环绕功能,那么具体如何设置呢,接下来看教程. 首先打开wps ...

  9. WPF 在绘图控件(Shape)中添加文字 [2018.7.15]

    原文:WPF 在绘图控件(Shape)中添加文字 [2018.7.15] Q:使用Shape的子类Ellipse画一个圆,如何在圆中添加文字? A:Shape类中不包含Text属性.可使用Shape类 ...

  10. 文字环绕和两栏自适应以及区域滚动插件iscroll.js

    一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字 ...

随机推荐

  1. 5. nginx跨域配置

    1.跨域问题处理:在nginx相关接口上配置如下: 如接口有自己的请求头,则加上:如接口自带请求头pubacc-buid if ($request_method = "OPTIONS&quo ...

  2. 使用IDEA+Tomcat部署web项目记录

    使用IDEA+Tomcat部署web项目记录 本文已同步发布于CSDN JDK版本:1.8(请自行配好环境变量) IDEA版本:2019.3 Tomcat版本:9.0.39 1.新建project和m ...

  3. IO基础知识与概念

    https://zhuanlan.zhihu.com/p/473639031

  4. System.Diagnostics.Process.Start(); 用法详解

    来源:https://news.68idc.cn/buildlang/ask/20150104156981.html 实例代码:http://www.cppcns.com/ruanjian/cshar ...

  5. 安装kubernetes dashboard以及用户授权

    kubernetes 版本v1.25.3 1.安装 版本查看:https://github.com/kubernetes/dashboard/releases kubectl apply -f htt ...

  6. MybatisPlus #{param}和${param}的用法详解

    作用 mybatis-plus接口mapper方法中的注解(如@Select)或者xml(如)传入的参数是通过#{param}或者${param}来获取值. 区别 1.解析方式: #{param}:会 ...

  7. 记录web面经

    1. npm版本号含义 例如: 2.3.1 (分别表示: 大版本,小版本, 补丁版本)大版本号: 大版本更新,功能添加,向下不兼容.小版本号:功能新增,向下兼容.补丁版本号: 修复bug.~符号含义: ...

  8. ROS2

    ROS2核心概念 节点 创建节点流程 编程接口初始化 创建节点并初始化 实现节点功能 销毁节点并关闭接口 #!/usr/bin/env python3 import rclpy # ROS2 Pyth ...

  9. windows2012安装.net4.7.2

    第一步,下载.net4.7.2安装包 离线包:https://download.visualstudio.microsoft.com/download/pr/1f5af042-d0e4-4002-9c ...

  10. python学习：窗口程序

    https://www.cnblogs.com/zyg123/p/10385456.html # 导入tkinter模块 import tkinter # 创建画布需要的库 from matplotl ...