在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中正確理解css圓角邊框及背景圖

建企業(yè)網(wǎng)站時(shí)使用CSS邊框圓角是很容易的事，但要設(shè)置邊框圓角的漸變效果就需要費(fèi)些功夫了，需要正確理解幾個(gè)CSS屬性的含義，background-origin,background-clip,background-size這幾個(gè)是必須用到的，調(diào)整好性能的數(shù)值就可以靈活運(yùn)用了。

想要實(shí)現(xiàn)CSS圓角漸變并匹配內(nèi)容背景圖可以參考以下代碼：

<style>
div {
 width: 500px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*設(shè)置圓角*/
 border:50px solid transparent; /*設(shè)置邊框顏色透明，確保背景漸變色顯示*/
 background-origin:border-box; /*從邊框開(kāi)始背景圖*/
 background-clip:padding-box,border-box; /*設(shè)置第一個(gè)背景和第二個(gè)背景的范圍*/
 background-size:cover;
 /*由于背景圖像不能設(shè)置純色，所以可以使用下面的方式設(shè)置純色*/
 background-image:linear-gradient(#fff, #fff),linear-gradient(#FC0, #F30); 
}
.a1{display:block;height:280px;background-image:url(/images/school.jpg);
background-repeat:no-repeat;background-size:contain;}
</style>

<div>
<span class="a1">邊框漸變色從內(nèi)邊框到邊框，背景圖像單獨(dú)設(shè)置不重復(fù)。</span>
</div>

background-origin表示的是背景起始位置，其三個(gè)值如下，依次是

border-box 從邊框開(kāi)始；
padding-box(默認(rèn)) 從內(nèi)邊距開(kāi)始；
content-box 從內(nèi)容開(kāi)始。

background-origin: border-box | padding-box(默認(rèn)) | content-box

background-clip表示的是背景填充位置，其四個(gè)值如下，依次是

border-box(默認(rèn)) 填充至邊框；
padding-box 填充至內(nèi)邊距；
content-box 填充之內(nèi)容；
text 作為字體前景色。

background-clip: border-box(默認(rèn)) | padding-box | content-box | text

background-size表示的是背景尺寸，其五個(gè)值如下，依次是

contain 將圖像擴(kuò)大至適應(yīng)最短的邊，剩余部分默認(rèn)重復(fù)圖像
cover 將圖像擴(kuò)大至適應(yīng)最長(zhǎng)的邊，圖像可能顯示不完整
length 兩個(gè)值依次設(shè)置圖像寬和高，未設(shè)置則為auto
percentage 兩個(gè)百分比依次設(shè)置圖像寬和高，未設(shè)置則為auto
auto 默認(rèn)設(shè)置

載地址在github,文末有使用方法

github地址:https://github.com/crabbly/Print.js/

官網(wǎng):https://printjs.crabbly.com/(可能被墻)

無(wú)法訪問(wèn)可以加企鵝群看離線(xiàn)版:1006429377

或者訪問(wèn):https://www.yuque.com/caiyongjie/snknlo/ga5ef9

官網(wǎng)截圖

簡(jiǎn)介

原文:

Print.js was primarily written to help us print PDF files directly within our apps, without leaving the interface, and no use of embeds. For unique situations where there is no need for users to open or download the PDF files, and instead, they just need to print them.

One scenario where this is useful, for example, is when users request to print reports that are generated on the server side. These reports are sent back as PDF files. There is no need to open these files before printing them. Print.js offers a quick way to print these files within our apps.

谷歌翻譯:

Print.js主要是為了幫助我們直接在我們的應(yīng)用程序中打印PDF文件，而無(wú)需離開(kāi)界面，也不使用嵌入。對(duì)于不需要用戶(hù)打開(kāi)或下載PDF文件的獨(dú)特情況，相反，他們只需要打印它們。

例如，當(dāng)用戶(hù)請(qǐng)求打印在服務(wù)器端生成的報(bào)告時(shí)，這種情況很有用。這些報(bào)告以PDF文件形式發(fā)回。打印前無(wú)需打開(kāi)這些文件。 Print.js提供了一種在我們的應(yīng)用程序中打印這些文件的快捷方式。

注意的地方:

PDF files must be served from the same domain as your app is hosted under. Print.js uses iframe to load files before printing them, therefore, it is limited by the Same Origin Policy. This helps preventing Cross-site scripting (XSS) attacks.

必須在托管應(yīng)用程序的同一域中提供PDF文件。 Print.js在打印文件之前使用iframe加載文件，因此它受同源策略的限制。這有助于防止跨站點(diǎn)腳本（XSS）攻擊。

初體驗(yàn)

首先在頁(yè)面上添加一個(gè)按鈕

打印PDF(注意:火狐不支持iframes,可以使用新標(biāo)簽頁(yè))

<button type="button" onclick="printJS('docs/printjs.pdf')">
 Print PDF
 </button>

打印大文件(可以彈出提示消息)

<button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">
 Print PDF with Message
 </button>

html打印

 <form method="post" action="#" id="printJS-form">
 ...
 </form>
 <button type="button" onclick="printJS('printJS-form', 'html')">
 Print Form
 </button>

打印帶頭部

 <button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection' })">
 Print Form with Header
 </button>

打印圖片

<img src="images/print-01.jpg" />
 printJS('images/print-01-highres.jpg', 'image')
 printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})

帶頭

 printJS({
 printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
 type: 'image',
 header: 'Multiple Images',
 imageStyle: 'width:50%;margin-bottom:20px;'
 })

從JSON數(shù)據(jù)

 someJSONdata = [
 {
 name: 'John Doe',
 email: 'john@doe.com',
 phone: '111-111-1111'
 },
 {
 name: 'Barry Allen',
 email: 'barry@flash.com',
 phone: '222-222-2222'
 },
 {
 name: 'Cool Dude',
 email: 'cool@dude.com',
 phone: '333-333-3333'
 }
 ]
 <button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})">
 Print JSON Data
 </button>

自定義CSS

 <button type="button" onclick="printJS({
	 printable: someJSONdata,
	 properties: ['name', 'email', 'phone'],
	 type: 'json',
	 gridHeaderStyle: 'color: red; border: 2px solid #3971A5;',
	 gridStyle: 'border: 2px solid #3971A5;'
	})">
 Print JSON Data
 </button>

自定義頭

 <button type="button" onclick="printJS({
	 printable: someJSONdata,
	 properties: [
		{ field: 'name', displayName: 'Full Name'},
		{ field: 'email', displayName: 'E-mail'},
		{ field: 'phone', displayName: 'Phone'}
	 ],
	 type: 'json'
 })">
 Print with custom table header text
 </button>
<button type="button" onclick="printJS({
		printable: someJSONdata,
		type: 'json',
		properties: ['name', 'email', 'phone'],
		header: '<h3 class="custom-h3">My custom header</h3>',
		style: '.custom-h3 { color: red; }'
	 })">
	Print header raw html
</button>

安裝使用

 npm install print-js --save
//或
 yarn add print-js

import print from 'print-js'

 //cdn,不知道能不能訪問(wèn),我這可以訪問(wèn)
 https://printjs-4de6.kxcdn.com/print.min.js
 https://printjs-4de6.kxcdn.com/print.min.cssye
 <script src="print.js"></script>

如果您將使用模態(tài)功能，還包括頁(yè)面上的Print.css。

 <link rel="stylesheet" type="text/css" href="print.css">

詳細(xì)配置:

兼容性

ostbirdAlertBox.js

下載地址:

https://github.com/postbird/PostbirdAlertBox.js

Alert

PostbirdAlertBox.alert({
    'title': '提示標(biāo)題',
    'content': '提示內(nèi)容主體',
    'okBtn': '好的',
    'contentColor': 'red',
    'onConfirm': function () {
    console.log("回調(diào)觸發(fā)后隱藏提示框");
    alert("回調(diào)觸發(fā)后隱藏提示框");
}

});

Confirm

PostbirdAlertBox.confirm({
    'title': '提示標(biāo)題',
    'content': '離開(kāi)本頁(yè)面進(jìn)行跳轉(zhuǎn)',
    'okBtn': '好的',
    'contentColor': 'red',
    'onConfirm': function () {
    console.log("OK - 回調(diào)觸發(fā)后隱藏提示框");
    alert("OK - 回調(diào)觸發(fā)后隱藏提示框");
    },
    'onCancel': function () {
    console.log("Cancel-回調(diào)觸發(fā)后隱藏提示框");
    alert("Cancel-回調(diào)觸發(fā)后隱藏提示框");
    }
});

Prompt

PostbirdAlertBox.prompt({
'title': '請(qǐng)輸入姓名',
'okBtn': '提交',
onConfirm: function (data) {
console.log("輸入框內(nèi)容是：" + data);
alert("輸入框內(nèi)容是：" + data);
},
onCancel: function (data) {
console.log("輸入框內(nèi)容是：" + data);
alert("輸入框內(nèi)容是：" + data);
},
});

使用說(shuō)明

1. 引入js 和 css 文件

2. 通過(guò)全局對(duì)象 PostbirdAlertBox 調(diào)用相關(guān)方法,三個(gè)方法為： PostbirdAlertBox.alert({}); PostbirdAlertBox.confirm({}); PostbirdAlertBox.prompt({});

配置參數(shù)

參數(shù)屬性意義適用方法是否必須

title 彈框標(biāo)題 alert、confirm(不適用于prompt) 否, 默認(rèn) : 提示信息

promptTitle prompt標(biāo)題 prompt 否, 默認(rèn) :請(qǐng)輸入內(nèi)容

content 提示內(nèi)容主體 alert、confirm(不適用于prompt) 否, 默認(rèn) : 提示內(nèi)容

contentColor 提示內(nèi)容顏色 alert、confirm 否，默認(rèn) : #000000

okBtn 確認(rèn)按鈕文字 alert、confirm(不適用于prompt) 否, 默認(rèn) : 好的

promptOkBtn prompt確認(rèn)按鈕文字 prompt 否, 默認(rèn) : 確認(rèn)

okBtnColor 確認(rèn)按鈕顏色 alert、confirm、prompt 否, 默認(rèn) : #0e90d2

cancelBtn 取消按鈕文字 alert、confirm、prompt 否, 默認(rèn) : 取消

onConfirm 確認(rèn)按鈕事件 alert、confirm、prompt(存在參數(shù)data) 否, 默認(rèn) : 不觸發(fā)事件

onCancel 取消按鈕事件 alert、confirm、prompt(存在參數(shù)data) 否, 默認(rèn) : 不觸發(fā)事件

參數(shù)說(shuō)明

1. title 和 promptTitle 分開(kāi)主要是為了方便不傳遞title的情況，prompt和alert、confirm的顯示文字不同

2. okBtn 和 promptOkBtn 分開(kāi)同樣是為了默認(rèn)情況下，prompt和alert、confirm的顯示文字不同

3. 正如前面的示例代碼中，prompt的回調(diào)函數(shù)，會(huì)給予一個(gè)data參數(shù)，用來(lái)獲取用戶(hù)輸入的內(nèi)容

在線(xiàn)咨詢(xún)

上一篇：Steam手機(jī)網(wǎng)頁(yè)登錄不上去？這可怎么辦？我有辦法
下一篇：CSS注入實(shí)例

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商